/*

	01. Body and things that we don't change
	02. Navigation
	03. Setting the main's sections
	04. Home Section
	05. Works Section
	06. About Section
	07. Contact Section
	08. Twitter Module
	09. Social Module
			
*/


/* 01. BODY AND WRAPPER ================================================== */


html, body {
  font-family:'OpenSansRegular', sans-serif;
	margin:0px auto;
	width:100%;
	height: 100%;
	background-color:#FFF;
	position:absolute;
	top:0px;
	left:0px;
	bottom:0px;
	
}

body {
  -webkit-overflow-scrolling: touch;
}

	
.row {
	text-align: center;}

.subtittle {
	font-family: 'Open Sans', sans-serif;
	text-transform:uppercase;
	letter-spacing:2px;
	color:#BBB;
	margin-bottom:0px;
	padding:30px 30px 30px 30px;
	font-size:22px;}

.subtittle a {
	font-family: 'Open Sans', sans-serif;
	color:#00aed7;
	text-decoration: none;
	-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;}

.subtittle a:hover {
	color:#777;}	

h2 {
	color:#555;
	font-family: 'Open Sans', sans-serif;
	font-size:52px;
	padding: 30px 0px 0px 0px;
	font-weight: lighter;}

.title_line {
    border-bottom: 1px solid #D5D5D5;
    display: block;
    height: 1px;
    margin: auto;
    margin-top:20px;
    width: 90px;}


/* 02. NAVIGATION ================================================== */



nav #logo {
	float:left;
	color:#212121;
	margin-left:10px;
	padding:15px;}
	
nav {
	z-index: 42;
	width: 100%;
	background: #FFF;
	position: relative;
	height: 60px;}

nav ul {
	float:right;
	display:inline-block;
	margin-right:10px;
	list-style:none;
	padding-top:15px;}

nav ul li {
    display:inline-block;
    list-style: none;
    float:left;
    padding:5px 20px;}

nav ul li a {
  	color:#333;
	position:relative;
	display:inline-block;
	font-weight: 300;
	text-decoration:none;
	font-size:12px;
	text-transform:uppercase;
	text-decoration:none;
	display:block;
	-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;}

nav li a:hover,
nav li a.selected {
	color:#00aed7;}

.sticky {
	position: fixed;
	top: 0px;}


/* Mobile Navigation Display none if no iDevice */

nav select {
      display: none;}
      

/* 03. SETTING OF MAIN SECTIONS  ================================================== */


#home {
	width:100%;
	height:100%;
	color:#FFF;
	background:url('../img/eplebilde.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment : fixed;  
    
    /* FIXED FOR IE */
    
}

#whatwedo {
	background-color:#EEE;
	padding:70px 0px 50px;}


#about {
	background:#f5f5f5;
	padding:70px 0px 50px;}
	
	
#contact {
	background-color:#f9f9f9;
	padding:70px 0px 50px;}
	

#twitter_module {
	background-color:#FFF;
	padding:40px 0px 40px;}
	
	
#social_module {
	background-color:#fFF;
	padding:0px 0px 30px;}
	
	
footer {
	padding:20px 0;
	background-color:#333;}


/* 04 HOME SECTION  ================================================== */


#home h1 {
	position:relative;
	margin:20% auto 0px auto;
	z-index: 999;}

.roles {
    font-size: 36pt;  
    font-weight: 300;  
    display: inline-block;
    line-height: 70px;
    height: 70px;
    vertical-align: middle;
    overflow: hidden;
    color: #FFF;
    z-index: 999;}

.roles div {
    height:             70px;
    -webkit-transition: margin-top 0.5s ease-in-out;
    -moz-transition:    margin-top 0.5s ease-in-out;
    -o-transition:      margin-top 0.5s ease-in-out;
    transition:         margin-top 0.5s ease-in-out;}

#down_button a {
	position: absolute; 
	width: 80px; 
	height: 80px; 
	bottom: 5%; 
	left: 50%; 
	margin-left: -40px;
	background: url("../img/down.png") no-repeat rgba(255,255,255,0.65); 
	background-position: 0px -80px;
	-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
	border-radius: 100%;}
	
#down_button a:hover {
	background-position: 0px 0px;}


/* -- Button back Contact -- */
	
#down_button_contact a {
	width:180px;
	padding: 0px;
	background-color: #00aed7;
	font-family:'OpenSansRegular', serif;
	font-size:13px;
	color:#FFF;
	text-align:center;
	text-transform:uppercase;
	letter-spacing:1px;
	text-decoration:none;
	position: absolute;
	bottom: 0px; 
	left: 50%; 
	margin-left: -90px;
	-webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;}

#down_button_contact a:hover {
	color:#121212;
	background: #FFF;}


/* 05 WORKS SECTION  ================================================== */


.og-grid {
    list-style: none;
	padding: 10px 0;
	margin: 0px auto;
	text-align: center;
	width: 100%;}
	
.og-grid li {
	display: inline-block;
	margin: 0px 15px 20px 0px;
	vertical-align: top;
	height: 185px;}

/* SELECTED ILLUSTRATION */
/*
.og-grid li.og-expanded > a::after {
	top: auto;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-bottom-color: #ddd;
	border-width: 15px;
	margin: 55px 0px 0px -140px;}
*/
/* PREVIEW CLASS */

.og-expander {
	position: absolute;
	background: #ddd;
	top: auto;
	left: 0;
	width: 100%;
	margin-top: 10px;
	text-align: left;
	height: 0;
	overflow: hidden;}

.og-expander-inner {
	padding: 30px 30px;
	height: 100%;}

.og-close {
	position: absolute;
	width: 40px;
	height: 40px;
	top: 50px;
	right: 20px;
	cursor: pointer;
	opacity: 1;
	background: url('../img/close.png');
	z-index: 20;
	-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;}

.og-close:hover {
	opacity:0.5;}

.og-fullimg,
.og-details {
	float: left;
	height: 80%;
	overflow: hidden;
	position: relative;}

.og-fullimg {
  width: 50%; 
}
.og-details {
  width: 50%;  
}


.og-details {
	padding: 10px 40px 0 20px;}

.og-fullimg {
	text-align: center;
	margin-top:10px;}

.og-fullimg img {
	display: inline-block;
	max-height: 100%;
	max-width: 100%;}

.og-details h3 {
	font-weight: 300;
	font-size: 52px;
	padding: 10px 0 10px;
	margin-bottom: 10px;
	color:#555;}

.og-details p {
	font-weight: 400;
	font-size: 16px;
	line-height: 22px;
	color: #999;}

.og-details a {
	font-size: 16px;
	color: #FFF;
	font-family:'OpenSansLight', sans-serif;
	text-transform: uppercase;
	letter-spacing: 2px;
	padding: 10px 20px;
	background: #00aed7;
	border: 3px solid #00aed7;
	display: inline-block;
	margin: 30px 0 0;
	outline: none;
	-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;}

.og-details a::before {
	content: '\2192';
	display: inline-block;
	margin-right: 10px;}

.og-details a:hover {
	background: #555;
	border-color: #555;
	color: #FFF;}

.og-loading {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #ddd;
	box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ccc;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -25px 0 0 -25px;
	-webkit-animation: loader 0.5s infinite ease-in-out both;
	-moz-animation: loader 0.5s infinite ease-in-out both;
	animation: loader 0.5s infinite ease-in-out both;}


/* 06. ABOUT SECTION ================================================== */


.portraits {
	position: relative;
	list-style-type: none;
	display: inline-block;
	background: #eee;
	background: #FFF;
	margin-bottom: 10px;
	padding-bottom: 10px;}

.portraits img {
	width:100%;
	-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;}
       

.portraits img:hover {
	filter:alpha(opacity=80);
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
    opacity: 0.8;}

.portraits .name {
	font-size: 18px;
	color: #2e2e2e;
	font-weight: normal;
	font-style: normal;
	margin: 10px 0 10px 0;
	display: inline-block;}

.portraits .poste {
	color: #FFFFFF;
	background-color: #00aed7;
	font-size:13px;
	text-transform: uppercase;
	padding: 2px 8px;
	margin-bottom: 10px;
	display: inline-block;}

.portraits .whathedo {
	color: #3b3b3b;
	font-size:12px;}


.portraits .whathedo a {
	padding: 0px 5px 0px 5px;}


/* 07 CONTACT SECTION ================================================== */


#contact form {
	margin-top:20px;}

#contact form input,
#contact form textarea{
	-moz-transition:all .3s ease-in-out;
	-ms-transition:all .3s ease-in-out;
	-o-transition:all .3s ease-in-out;
	-webkit-transition:all .3s ease-in-out;
	border:2px solid #FFF;
	box-shadow:none;
	color:#999;
	resize: vertical;
	font-size:12px;
	letter-spacing:1px;
	margin-bottom:25px;
	padding:5px 10px;
	transition:all .3s ease-in-out;
	width:100%;}

/* SET A HEIGHT TO THE INPUT*/

#contact form input{
	height:40px;
	resize: none;}

/* SET A HEIGHT TO THE TEXTAREA*/

#contact form textarea{
	min-height:120px;}
	
/* BUTTON SENDER */

#contact form .submit{
	-moz-transition:all .3s ease-in-out;
	-ms-transition:all .3s ease-in-out;
	-o-transition:all .3s ease-in-out;
	-webkit-transition:all .3s ease-in-out;
	background:#00aed7;
	border:2px solid #00aed7;
	color:#FFF;
	font-size:12px;
	height:40px;
	letter-spacing:1px;
	padding:5px 10px;
	text-transform:uppercase;
	transition:all .3s ease-in-out;
	width:100%;}

/* BUTTON SENDER HOVER */

#contact form .submit:hover{
	background:#555;
	border:2px solid #555;
	color:#FFF;
	cursor:pointer;}

/* INPUT AND TEXTAREA WHEN NOTHING  */

#contact form input:required,
#contact form textarea:required{
	background:#FFF url(../img/invalid.png);
	background-position:98% 5px;
	background-repeat:no-repeat;
	box-shadow:inherit;}

/* INPUT AND TEXTAREA WHEN VALID : GOOD */

#contact form input:required:valid,
#contact form textarea:required:valid{
	background:#FFF url(../img/valid.png);
	background-position:98% 5px;
	background-repeat:no-repeat;
	border-color:#00aed7;
	color:#00aed7;}

/* INPUT AND TEXTAREA WHEN INVALID : NOT GOOD GOES RED */

#contact form input:focus:invalid,
#contact form textarea:focus:invalid{
	background:#FFF url(../img/invalid-red.png) no-repeat 98% 5px;
	border-color:#ec7e7e;
	box-shadow:0 0 2px rgba(236,126,126,0.7);}

/* BLOCK CONTACT RIGHT */

#contact .info {
	width:auto;
	margin-left:5%;
	display:inline-block;
	text-align:left;
	line-height:25px;}
	
#contact .info p {
	color:#777;}
	
#contact .info h4:first-child {
	margin-top:15px;}

#contact .info h4 {
	color:#555;
	font-family:'OpenSansSemibold', sans-serif;
	text-transform:uppercase;
	font-size:14px;
	font-weight:normal;
	letter-spacing:1px;
	margin-bottom:0px;
	margin-top:30px;}

#contact .info a {
	color:#00aed7;
	letter-spacing:1px;
	text-decoration:none;
	-webkit-transition:all .3s ease-in-out;
	-moz-transition:all .3s ease-in-out;
	-ms-transition:all .3s ease-in-out;
	-o-transition:all .3s ease-in-out;
	transition:all .3s ease-in-out;}

#contact .info a:hover {
	color:#777;
	text-decoration:none;
	-webkit-transition:all .3s ease-in-out;
	-moz-transition:all .3s ease-in-out;
	-ms-transition:all .3s ease-in-out;
	-o-transition:all .3s ease-in-out;
	transition:all .3s ease-in-out;}


/* 08. TWITTER MODULE ================================================== */


	.tweet_list {
		list-style: none;
		margin: 0;
		padding: 0;
		overflow-y: hidden;
		background-color: #FFF;}
	
		.tweet_list li {
			overflow-y: auto;
			overflow-x: hidden;
			list-style-type: none;}
		
			.tweet_list li a {
				color:#333;
				text-decoration: none;
				-webkit-transition:all .3s ease-in-out;
				-moz-transition:all .3s ease-in-out;
				-ms-transition:all .3s ease-in-out;
				-o-transition:all .3s ease-in-out;
				transition:all .3s ease-in-out;}
		
			.tweet_list li a:hover {
				color:#00aed7;}
		
		.tweet_list .tweet_even {
			background-color: #FFF;}
		
		.tweet_list .tweet_avatar {
			display: none;}
		
			.tweet_list .tweet_avatar img {
				display: none;}
	
	     .tweet_list .tweet_time a{
			color:#999;
			font-size:12px;
			margin-left: 10px;}
		
      #ticker {
        background-color:#FFF;
      	text-align:center;
      	text-align:center;
        overflow-y: hidden;
        position: relative;}
        
      #ticker ul.tweet_list {
        overflow: hidden;
        font-size:14px;
        height:22px;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;}
        
      #ticker ul.tweet_list li {
        overflow: hidden;
        height:35px;
        font-size:14px;}
      
      .tweet_list li::before {
	    content: url(../img/littletweet.png);}

	  .tweet_list li img {
		margin-bottom:-2px;}
		

/* 09. SOCIAL MODULE ================================================== */


#social_module a {
	text-decoration: none;}

#social_module  ul li{
	list-style:none;
	display:inline-block; 
	padding: 0px 20px 0px 20px;}

.icon{
	font-family:"Socialico";
	font-weight:400;
	font-style:normal;
	font-size:30px;
	color:#777;
	text-decoration: none;
	-webkit-transition:all .5s ease-in-out;
	-moz-transition:all .5s ease-in-out;
	-ms-transition:all .5s ease-in-out;
	-o-transition:all .5s ease-in-out;
	transition:all .5s ease-in-out;}
	
.icon:hover{
	color:#00aed7;}







/* Eplehagen */
.logo_big {
	max-width: 450px;
}


.roles {
	font-size: 32pt;
}

.roles div {
	text-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

#logo img {
	max-height: 30px;
}

.og-grid > li {
	background: url('../img/stor_imac.png') no-repeat top center;
	background-size: contain;
	height: 232px;
	padding: 10px;
	margin: 20px;
}

.og-grid > li a {
	outline: 0;
}

.og-grid > li a > img, .og-grid > li a > h3 {
	width: 230px;
	height: 125px;
	line-height: 125px;
	text-align: center;
	margin: 5px;
	color: #fff;
	font-size: 18pt;
	cursor: pointer;
	transition: 0.25s transform;
}

.og-grid > li a:hover > h3 {
	transform: scale(1.2, 1.2);
	text-shadow: 0 2px 3px #000;
}

.og-expander {
	background-color: #fff;
	margin-top: 80px;
	z-index: 99;
}

.og-expander-inner {
	padding-right: 80px;
	padding-top: 40px;
	padding-bottom: 0;
}

.og-grid li.og-expanded > a::after {
	display: none;
}

.og-details {
	overflow-y: hidden;
	max-width: 700px;
}

.og-details h3 {
	margin-bottom: 25px;
}

.og-details p {
	color: #222;
}

.og-details a[href='#'] {
	display: none !important;
}

.og-fullimg img {
	padding-right: 50px;
	float: right;
}

.og-grid ol { /* ul overstyres i malen */
	margin-left: 20px;
	margin-top: 20px;
	list-style-type: disc;
}

.og-grid ol li {
	display: list-item !important;
	height: auto !important;
	margin: 0 !important;
}

.name-contact {
	font-size: 90%;
}

.name-contact a {
	color: #333;
}

.map_big {
	width: 100%;
	height: 400px;
	margin-top: 100px;
}

#contact {
	padding-bottom: 0;
}


@media(max-width: 720px) {
 
  
.og-grid > li a > img, .og-grid > li a > h3 {
  width: auto; 
}
   
  
}


@media(max-width: 500px) {
	.logo_big {
		max-width: 100%;
		padding-top: 70px;
	}

	.og-grid > li a > h3 {
		width: auto;
		line-height: 110px;
		font-size: 16pt;
	}
	.og-details {
		min-height: 520px;
	}

	.og-expander {
		margin-top: 55px;
	}

	.og-expander-inner {
		padding-right: 0;
	}

	.og-details {
		text-align: left !important;
	}

	#down_button a {
		display: none;
	}
}


.fruit-question {
	text-align: left;
	padding-bottom: 0.5rem;
}

.fruit-question small {
	font-size: 90%;
}

.fruit-question strong {
	font-weight: bold;
}