html, body {
		color:#666;
		font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	}


.row {
		margin: auto;
		text-align: center;
	}

.img-responsive { width:100%;}

.get-wetter { position:absolute; z-index: 2000; float:right; margin-left: 42%; margin-top:2%;}
img.wetter { width: 48vw; max-width:1040px; }

/* LITTLE ANNIMATION FOR EVERY LINK */

a {
		color:#f345b4;
		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;}

a:hover {color:#666;}

.selected {color:#666;}

p { font-size : 1.5em; padding:.2em; font-weight: 100;}

h2 {
		color:#f345b4;
		font-size:4em;
		line-height: 2.5em;
		font-weight: 100;
		    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;

	}


h3 { font-size : 2em; color:#666; text-align:center; font-weight: 200; line-height: 2.5em;}
/* SUBTITLES OF EACH SECTION */

.lead {
		font-family: "OpenSansLight", sans-serif;
		font-size:16px; 
		line-height: 25px; 
		color:#898e96; 
		 }


.lead a {color: #f345b4;}


h4 {	
		font-size: 1.125em;
		color: #f345b4;
		font-family: "OpenSansSemiBold",sans-serif; 
		text-transform: uppercase;}

.left {
		text-align: left;}

.right {
		text-align: right;}

.top-tittle { margin:20px auto 60px;}

.header-row { min-width:98% !important;}



/* 01. NAVIGATION ================================================== */

.reg { font-size: .5em; font-weight: 100;}
a.wetter{ color:#eee !important;}
a.wetter:hover{ color:#fff !important;}


#navblock2 {

		height:90px; 
		background:#0070dc;}
		
#navblock {

		height:75px; 
		background:#FFF;}


#nav {
		z-index: 9999;
		height:75px;
		background: #f345b4; 
		border-bottom: 1px solid rgba(255,255,255, 0.2);
		box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, .1);}
		

#nav .fixed {border-bottom:  1px solid #4b5863;}

@media (min-width: 768px)  { 
	
	#nav {
			position: fixed;		
	}
}


@media only screen and (max-width: 768px)
.fixed {
position: relative !important;
}

.header-logo { padding:.15em; width:32vw; min-width:300px; max-width:432px;} 
#nav .logo {
		padding:5px 0; 
		max-width:315px;
		}

#nav .logo:hover { 
		opacity: 1;}


.navbar ul {padding: 0px; margin-top:15px; }
		
.navbar ul li {
		border-bottom: none;
		font-size: 20px;
		text-transform: uppercase;}
		
.navbar ul li a {color:#FFF; height: 65px;}

.navbar ul li a:hover {background-color:#f345b4; height: 75px;}

#nav i {font-size:30px;}



/* 03. OUR METHOD ================================================== */

#whatis {
		padding:20px 0;}

#method img{ 
		-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;} 
		
#method img:hover{
		opacity: 0.7; 
		-webkit-transform: scale(0.9); 
		transform: scale(0.9); }


/* 04. SELECTED WORK ================================================== */


#portfolio {
		background: #f9f9f9; 
		padding: 70px 0;}
		

#portfolio h4 {
		margin-top:50px; 
		margin-bottom: 10px; }


.selected {
		padding:20px 0 10px;}

/* DIVIDER BETWEEN TWO SELECTED WORK */

.divider {
		border-top:1px solid rgba(91,105,120,0.2);}

/* PREVIEW BUTTON */

.button-preview {
		color:#fff;
		font-size:13px;
		margin:20px 0;
		width:200px;
		border-radius: 2px;
		text-transform:uppercase;
		padding:8px 30px 8px 20px !important;
		background:url('../img/arrows.png') #f345b4 right center no-repeat ;
		-webkit-transition:0.6s all cubic-bezier(0.1, 0.1, 0.08, 1.9);
		-moz-transition:0.6s all cubic-bezier(0.1, 0.1, 0.08, 1.9);
		-o-transition:0.6s all cubic-bezier(0.1, 0.1, 0.08, 1.9);
		-ms-transition:0.6s all cubic-bezier(0.1, 0.1, 0.08, 1.9);
		transition:0.6s all cubic-bezier(0.1, 0.1, 0.08, 1.9);
		-webkit-transition: all 0.3s ease-in-out;}
	
.button-preview a  {
		color:#FFF;
		text-decoration:none ;}

.button-preview:hover {
		background:url('../img/arrows.png') #f2acca 15px center no-repeat ;
		padding:8px 20px 8px 30px !important;
		cursor:pointer;}


/* 05. OTHERS WORKS ================================================== */


#projects {
		background: #FFF; 
		padding: 70px 0;}

/* PROJET GRID */

#projects_grid {
    overflow: hidden;
}

.items {
    width: 100%;
    clear: both;
}

.item {width:100%; height: 100%; margin-top:2%;}

.items li img {
    display: block;
}
.items:after {
    content: '';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.items li a,
.items li a img {
    display: block;
    position: relative;
}
.items li a {
    overflow: hidden
}
.items li a div {
    position: absolute;
    background: rgba(47, 67, 83, 0.8);
    width: 100%;
    height: 100%;
}
.items li a div h5 {
    display: block;
    padding: 10px 0;
    margin: 50px 20px 20px 20px;
    text-transform: uppercase;
    color: #FFF;
    font-size: 1.125em;
	font-family: "OpenSansSemiBold",sans-serif;    
    text-align: center;
}
.items li a div h5 span {
    font-size: 12px;
    display: block;
    color: #f345b4;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0.2px;
    margin-top: 5px;
}

/* PROJET GRID : FILTER FONCTION */

.filter {
    padding: 0;
    margin-bottom: 30px;
}
.filter li {
    margin: 0;
    background: none;
    display: inline;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    margin-left: 4px;
}
.filter li a:hover,
.filter li a.active {
    background-color: #f345b4;
    color: #FFF;
}



.filter li a {
    color: #666;
    display: inline-block;
    background-color: #f8f8f8;
    padding: 6px 20px 5px;
    margin-bottom: 4px;
}


		


img.splash { display:inline-block; width:6vw; max-width:44px;}



/* 08. WHAT PEOPLE THINK ================================================== */

#feedbacks {
		background:#fff; 
		padding: 20px 0;}
		
/* TESTIMONIALS GRID */
      
.grid-testimonials
		{
		  overflow: hidden;
		}
		.grid-testimonials li
		{
		  float: left;
		  list-style-type: none;
		  padding-bottom: 3.125em
		}
		.grid-testimonials p
		{
		  line-height: 1.5em;
		  margin: 0
		}
		.grid-testimonials-citation
		{
		  display: block;
		  font-size: 1.125em;
		  color: #f345b4;
		  font-family: "OpenSansSemiBold",sans-serif; 
		  margin-top: 3em;
		  text-transform: uppercase;
		  text-align: center
		}
		.grid-testimonials li div
		{
		  border: 10px solid #f345b4;
		  border-radius: 10px;
		  padding: 2.125em 7.638888888888889%;
		  position: relative;
		}
		.grid-testimonials .quote-arrow
		{
			background: #fff;
			border-right:10px solid #f345b4;
			border-bottom:10px solid #f345b4;
			content: '';
			display: block;
			position: absolute;
			bottom: -28px;
			left: 50%;
			margin-left: -25px;
			width: 40px;
			height: 40px;
			-moz-transform:rotate(45deg);
			-webkit-transform:rotate(45deg);
		}
		@media screen and (min-width: 50em) 
		{
			.grid-testimonials li
		  {
		    margin-right: 5%;
		    width: 30%
		  }
			.grid-testimonials li:nth-child(3n)
		  {
		    margin-right: 0
		  }
		}


/* 09. NEWSLETTER ================================================== */	

#subscribe {
		/* background: url('../img/bg2.jpg');/* BACKGROUND OF SUBSCRIBE ANY SIZE EDIT ALSO IN MEDIA QUERIES */ 
		background: rgba(42,52,62, 0.9); 
		background-position:center;
		background-size: cover;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-attachment : fixed;  /* FIXED FOR IE */ 
		padding: 60px 0; width:100%;}

#subscribe  h4 {
		color: #FFF;
		font-size: 1.125em; 
		padding:8px 0px;}

/* SUBSCRIBE EMAIL FIELD  */
				
.subscribe input[type="email"] {
		border:none;
		width:100%;
		font-size: 13px;
		font-weight: 100;
		background:  #FFF;
		color:#B5B5B5;
		padding: 13px 40px 12px 40px;
		border-radius: 2px;
		box-shadow: inset 0px 0px 0px 2px rgba(0,0,0,0.0);
		background:#FFF url(../img/email.png);
		background-position:3% 9px;
		background-repeat:no-repeat;
		-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;}

/* SUBSCRIBE FOCUS ON  */

.subscribe input[type="email"]:focus {
		box-shadow: inset 0px 0px 0px 2px #f345b4;
		color:#555;}

/* SUBSCRIBE SUBMIT BUTTON */

.subscribe input[type="submit"]{
		float: right;
		display: block;
		width:100%;
		 padding: 13px 40px 10px 40px;
		border: none;
		border-radius: 2px;
		cursor: pointer;
		font-size: 13px;
		color:#FFF;
		background-color: #f345b4;
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-ms-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;}

/* SUBSCRIBE SUBMIT BUTTON HOVER */

.subscribe input[type="submit"]:hover{
		background: #666;}

		
/* 10. CONTACT & FOOTER ================================================== */

img.footer-logo { width: 36vw; max-width: 350px; min-width: 150px;}

#footer {
		padding: 70px 0 20px;}


.social {
		padding: 10px 0 5px;}

.social i {
		font-size:23px; 
		margin: 0 20px;}

.social a {
		color:#969BA2;}

.social a:hover {
		color:#7dd2e4;}


.contact h4, .contact p {
		margin-left: 15px;}

.contact h4 {
		font-size:16px; 
		font-family: "OpenSansSemiBold",sans-serif; }
		
.contact p {
		color:#7F8289; 
		margin-top: 10px;}
		
.contact form label {float:left; padding-bottom: 5px;}
		
.contact form label span {color:#D1D1D1;}

.contact form input,
.contact form textarea{
		font-family: "OpenSansLight";
		font-size:13px;
		-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: 1px solid #C2C6CB;
		border-radius: 2px 2px 2px 2px;
		box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05) inset;
		color: #666;
		resize: vertical;
		font-size:12px;
		margin-bottom: 15px;
		letter-spacing:1px;
		padding: 9px 10px 8px;
		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;
		padding-top: 8px;}
	
/* BUTTON SENDER */

.contact form .submit{
		color:#FFF;
		height:40px;
		width: 150px;
		border-radius: 2px;
		letter-spacing:1px;
	    float: left;
	    display: block;
		border: none;
	    cursor: pointer;
	    font-size: 13px;
	    color:#FFF;
	    background-color: #f345b4;
	    -webkit-transition: all 0.2s ease-in-out;
	    -moz-transition: all 0.2s ease-in-out;
	    -ms-transition: all 0.2s ease-in-out;
	    -o-transition: all 0.2s ease-in-out;
	    transition: all 0.2s ease-in-out;}

/* BUTTON SENDER HOVER */

.contact form .submit:hover{
		background:#666 ;
		cursor:pointer;}

/* INPUT AND TEXTAREA WHEN NOTHING  */

.contact form input:required,
.contact form textarea:required{
		background:#FFF url(../img/invalid.png);
		background-position:98% 6px;
		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% 6px;
		border:1px solid #BBB;
		background-repeat:no-repeat;
		color:#777;}

/* 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% 6px;
		border-color:#ec7e7e;
		box-shadow:0 0 2px rgba(236,126,126,0.7);}
		

.contact .info {margin-top:25px;}

#copyright {background: #FFF; }

#copyright .row { padding:20px;  text-transform: uppercase; font-size:11px; font-family: "OpenSansLight", sans-serif;}


/* 11. MEDIA QUERIES ================================================== */

/* MAX WIDH 768PX */
	
@media screen and (max-width : 768px)  {

		.navbar ul li a.wetter { color:#f345b4 !important;}

		#navblock2 { height: 60px; }
							
		.subscribe input[type="email"] { text-align: center; margin-bottom: 10px;}
		
		.contact form .submit {margin-bottom: 20px;}
				
		.contact .left  {margin-left: -20px; text-align: center;}
		
		.divider {border-top:none;}
						
		.social i {font-size:20px; margin: 0 15px;}
		
		.contact .left  {margin-left: -20px;}
		
		.contact form {margin-bottom: 50px;}
		
		#about img {width: 100%;}
		
		#about .portrait {width:48%;}
		
		#portfolio .row h4 {text-align: center; margin-top:0px;}
		
		#portfolio .row p {text-align: center;}
		
		.button-preview {margin:auto; margin: 15px auto;}
				
		#sequence .title { color:#000;}		
		
		.contact form .submit {width:100%;}
		
		#projects_grid .item {width:48%;}
		
		#nav .logo {max-width:30%;}
		
		.navbar ul li { 
		background: ;
		border-bottom: 1px solid #a6adb3; }
		.navbar ul li:hover { 
		background:#a6adb3;
		border-bottom: 1px solid #a6adb3; }
		.navbar ul li a {color:#666;}
		.navbar ul li a:hover {color:#FFF;}
	
			
}


/* MAX WIDH 400PX */
		
@media screen and (max-width : 480px){
	
	#navblock2 { height: 40px; }
		
		h2 { font-size:28px;}
				
		.lead {font-size:15px;}
		
		.subscribe input[type="email"] { text-align: center; margin-bottom: 10px;}
		
		.contact form .submit {margin-bottom: 20px;}
		
		.social i {font-size:20px; margin: 0 9px;}
		
		#portfolio .row h4 {text-align: center;}
		
		#portfolio .row p {text-align: center;}
						
		.contact .left  {margin-left: -20px; text-align: center;}
		
		.button-preview {margin:auto; margin: 15px auto;}
		
		#about img {width: 100%;}
		
		#about .portrait {width:98%;}
						
		.divider {border-top:none;}
		
		#projects_grid .item {width:100%;}

		#nav .logo {max-width:35%;}

}


/* FIREFOX FIX */
@-moz-document url-prefix() { 
	.filter li a {
	    padding: 5px 20px 6px
	}
}
.isotope-item {
    z-index: 2;
    display: block !important;
}
.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}
.isotope,
.isotope .isotope-item {
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -ms-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
}
.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    -ms-transition-property: height, width;
    -o-transition-property: height, width;
    transition-property: height, width;
}
.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    -ms-transition-property: -ms-transform, opacity;
    -o-transition-property: top, left, opacity;
    transition-property: transform, opacity;
}
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
    -webkit-transition-duration: 0s;
    -moz-transition-duration: 0s;
    -ms-transition-duration: 0s;
    -o-transition-duration: 0s;
    transition-duration: 0s;
}


.videowrapper {
    float: none;
    clear: both;
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}
.videowrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}