/*

	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;}
	

	
	
.row {
	text-align: center;}

.subtitle {
	font-family:'OpenSansRegular', sans-serif;
	letter-spacing:0px;
	line-height:28px;
	color:#666;
	margin-bottom:0px;
	padding:30px 30px 30px 30px;
	font-size:19px;
}

.subtitle on white {
	font-family:'OpenSansRegular', sans-serif;
	letter-spacing:0px;
	line-height:28px;
	color:#c7c7c7;
	margin-bottom:0px;
	padding:30px 30px 30px 30px;
	font-size:19px;
}

.subtittle a {
	font-family:'OpenSansRegular', 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:#999;
	font-family:'OpenSansLight', sans-serif;
	font-size:52px;
	padding: 30px 0px 0px 0px;
}
	
h3 {
	color: #555;
	font-family: 'OpenSansLight', sans-serif;
	font-size: 28px;
	padding: 8px 0px 15px 0px;
}

h4 {
	color: #555;
	font-family: 'OpenSansLight', sans-serif;
	font-size: 26px;
	padding: 30px 0px 15px 0px;}
	
	
h5 {
	color: #666;
	font-family: 'OpenSansLight', sans-serif;
	font-size: 18px;
	font-weight:200;
	padding: 25px 0px 15px 0px;
}

h6 {
	color: #666;
	font-family: 'OpenSansLight', sans-serif;
	font-size: 18px;
	font-weight:200;
	padding: 30px 0px 2px 0px;
}



.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:#000;
	background:url('http://www.plusonemedia.co.uk/img/main2-1400x800.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: #000;
    z-index: 999;}
	
.roles bold {
    font-size: 36pt;  
    font-weight: 600;  
    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; 
	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;}
	
#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: 175px 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: auto;}

.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('../images/close.png');
	-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 {
	width: 50%;
	float: left;
	/*height: 80%;*/
	overflow: hidden;
	position: relative;}

.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,select,
#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;}
	
	
	#contact form select{
	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:16px;
			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:16px;}
      
      .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;}