@charset "utf-8";
/* CSS Document */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
CUBE+ STYLESHEET
by wedothewebs
Date: 28/09/2013
~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
@import url(https://fonts.googleapis.com/css?family=Lato:400,100,100italic,300,300italic,400italic,700,700italic,900,900italic);
@import url(font-awesome.css);
@import url(bootstrap.css);
@import url(bootstrap-responsive.css);
@import url(sequence.css);
@import url(animate.css);
@import url(jquery.easy-pie-chart.css);
@import url(flexslider.css);
@import url(popup.css);
@import url(jquery.fancybox.css);

body {
	color: #777777;
	font-family: 'Lato', sans-serif;
	padding-bottom: 0;
}

/* FONTS
    -------------------------------------------------- */

@font-face {
	font-family: 'neutra_textdemi_sc';
	src: url('../font/neutratext-demisc-webfont.eot');
	src: url('../font/neutratext-demisc-webfont.eot?#iefix') format('embedded-opentype'), url('../font/neutratext-demisc-webfont.woff') format('woff'), url('../font/neutratext-demisc-webfont.ttf') format('truetype'), url('../font/neutratext-demisc-webfont.svg#neutra_textdemi_sc') format('svg');
	font-weight: normal;
	font-style: normal;

}
@font-face {
    font-family: 'entypo';
    src: url('../font/entypo.eot');
    src: url('../font/entypo.eot?#iefix') format('embedded-opentype'),
         url('../font/entypo.woff') format('woff'),
         url('../font/entypo.ttf') format('truetype'),
         url('../font/entypo.svg#aleoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'entypo-social';
    src: url('../font/entypo-social.eot');
    src: url('../font/entypo-social.eot?#iefix') format('embedded-opentype'),
         url('../font/entypo-social.woff') format('woff'),
         url('../font/entypo-social.ttf') format('truetype'),
         url('../font/entypo-social.svg#aleoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'aleoregular';
    src: url('../font/Aleo-Regular-webfont.eot');
    src: url('../font/Aleo-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/Aleo-Regular-webfont.woff') format('woff'),
         url('../font/Aleo-Regular-webfont.ttf') format('truetype'),
         url('../font/Aleo-Regular-webfont.svg#aleoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'aleolightitalic';
    src: url('../font/Aleo-LightItalic-webfont.eot');
    src: url('../font/Aleo-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/Aleo-LightItalic-webfont.woff') format('woff'),
         url('../font/Aleo-LightItalic-webfont.ttf') format('truetype'),
         url('../font/Aleo-LightItalic-webfont.svg#aleolightitalic') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'aleolight';
    src: url('../font/aleo-light-webfont.eot');
    src: url('../font/aleo-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/aleo-light-webfont.woff') format('woff'),
         url('../font/aleo-light-webfont.ttf') format('truetype'),
         url('../font/aleo-light-webfont.svg#aleolight') format('svg');
    font-weight: normal;
    font-style: normal;

}



/* CHANGEABLE STYLES
    -------------------------------------------------- */
h1, h2, h3, h4, h5 {
	margin: 0;
	padding: 0;
	font-weight: 300;
}

h1 {
	font-size: 40px;
	margin: 0;
	font-family:aleolight;
}

h2 {
	color: #2A323A;
	font-size: 36px;
}

h3 {
	font-size: 24px;
}

h4 {
	font-size: 22px;
}

h5 {
	font-size: 20px;
}

p {
	font-family: lato;
	font-size: 16px;
	font-weight: 300;
	margin: 0 0 10px;
	line-height: 24px;
}

a:hover:after span {
}

a {
	transition: all 0.2s ease-in-out 0s;
	-webkit-transition: all 0.2s ease-in-out 0s;
}

a:focus {
	outline: medium none;
	outline-offset: 0;
}

a:hover, a:focus, a {
	text-decoration: none;
}

ul {
	list-style: none outside none;
	margin: 0;
}

ul:after {
	clear: both;
	content: "";
	display: block;
}

li {
	font-weight: normal;
	line-height: 20px;
	transition: all 0.2s ease-in-out 0s;
	-webkit-transition: all 0.2s ease-in-out 0s;
}

img {
	max-width: 100%;
}

*::-moz-selection, {
	color: #7f7f7f;
}

input:focus:invalid:focus, textarea:focus:invalid:focus, select:focus:invalid:focus {
	color: #7f7f7f !important;
}

/* GLOBAL STYLE END
-------------------------------------------------- */

/* customizable Style */
#wrapper {
	position: relative;
	width: 100%;
	margin: 0 auto;
}

section {
	position: relative;
	text-align: center;
}

.center {
	text-align: center;
}

h1.center {
	margin: 5px auto;
	text-align: center;
}

.valign {
	vertical-align: middle;
}

.left {
	float: left !important;
}

.right {
	float: right !important;
}

.left-al {
	text-align: left !important;
}

.right-al {
	text-align: right !important;
}

.clear:after {
	clear: both;
	content: "";
	display: block;
}

.m20 {
	margin: 20px 0;
}

.m20t {
	margin: 20px 0 0;
}

.m15r {
	margin-right: 15px;
}

.clear {
	clear: both;
}

.global-color {
	color: #5a5a5a;
}

.global-color a {
	color: #5a5a5a;
}

.first {
	margin-left: 0px !important;
}

.relative {
	position: relative;
}

.bold {
	font-weight: 700;
}

/*Transition Animation*/
a, #primary, .item_box .icon, .team, .team .social, .team .social a, .service_icon, .service_icon img, .service_hover, .carousel-control, .carousel, nav#primary, .mailFromDiv, .mailSuccessDiv, .error, .er {
	-webkit-transition: all 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
	-moz-transition: all 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
	-ms-transition: all 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
	-o-transition: all 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
	transition: all 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750); /* linear */
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 HEADER SECTION
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#site-header{height:92px;overflow:visible;position:fixed;top:0px;left:0;width:100%;background:white;transition:all 0.3s linear;z-index:2000;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;-webkit-perspective:1000;-moz-perspective:1000;-ms-perspective:1000;perspective:1000;padding-top:10px;padding-bottom:3px;}
#site-header.onscroll{height:62px;overflow:visible;position:fixed;top:0px;left:0;width:100%;background:#FFF;transition:all 0.3s linear;z-index:2000;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;-webkit-perspective:1000;-moz-perspective:1000;-ms-perspective:1000;perspective:1000;padding-top:0px;padding-bottom:0px;box-shadow: 0 0 2px rgba(6, 8, 8, 0.15);}
.site-header-container{width:960px;margin:0 auto;}
.site-header-container>hgroup{width:155px;}
.main-navigation>.container>hgroup{display:inline-block!important;vertical-align:middle;}
.site-header-container>hgroup,.site-header-container>div{display:inline-block;}
#logo{width:200px;min-width:200px;height:80px;max-height:80px;margin:10px 0;display:inline-block;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;transition:all 0.3s linear;}
#logo.onscroll{width:200px;min-width:155px;height:42px;max-height:42px;margin:10px 0;display:inline-block;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
#logo h1{width:200px;height:80px;display:block;background:transparent url("../images/ayl-logo-light.png") no-repeat center center; background-size:100% auto;margin: 0px; padding: 0px;transition:all 0.3s linear;}
#logo.onscroll h1{width:155px;height:42px;display:block;background:transparent url("../images/ayl-logo-dark.png") no-repeat center center; background-size:100% auto;margin: 0px; padding: 0px;}
.navigation{margin-left:20px;height:62px;display: inline-block;vertical-align: middle;width:715px;}
#site-header.onscroll .navigation{vertical-align:top;position:relative;}
.navigation nav{ display: block; float: left;margin-left:3%;transition:margin-left 0.3s linear;}
.navigation nav ul{margin: 0px; padding: 0px;display:inline-block;vertical-align:middle;height:62px;}
.navigation nav ul li{list-style-type: none; display: inline-block;height:62px;vertical-align:top;}
.navigation .site-nav ul li .nav-link {text-align: center;/*height: 62px;line-height: 62px;*/position:relative;font-size:15px;font-weight:bold;/*line-height:1.75;*/color: #474747;padding:10px 17px;display:inline-block;vertical-align:middle;-webkit-tap-highlight-color:transparent;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box; text-decoration: none;height:57px;line-height:62px;padding-top:0;}
#site-header.onscroll .navigation .site-nav ul li .nav-link {height:62px;}
#site-header.onscroll .navigation nav{margin-left:0;}
.navigation .site-nav ul li .nav-link:hover, .navigation .site-nav ul li.nav-link:focus{outline:none;background-color: transparent;border-bottom:5px solid #474747;}
#site-header.onscroll .navigation .site-nav ul li .nav-link:hover, .navigation .site-nav ul li.nav-link:focus{outline:none;background-color: transparent;border-bottom:5px solid #219ed2;}
.nav-link.active{color:#219ed2 !important;}
.main-navigation .active.nav-link:after, .main-navigation  .links-section--main .links-list a.active:after, .main-navigation  .active.more-overlay-close:after{position:absolute;bottom:0px;left:18px;right:18px;content:'';display:block;height:4px;background-color:#219ed2}
.navigation nav.action-nav{ padding: 0px;float:left;height: 100%; float: right;display:inline-block;vertical-align:middle;position:absolute;right:0;}
.action-nav ul li{line-height:62px;}
.action-nav ul li a{margin-bottom:5px;color:#FFF;}
.navigation nav ul{display: block; float: left;}
.action-nav ul.links li a{margin-right: 13px;height: auto;padding: 0.75em 1.5em;background: transparent;position: relative;font-size: 0.95em;font-weight: bold;line-height: 1.75;letter-spacing: .04em;color: white;display: inline-block;vertical-align: middle;-webkit-tap-highlight-color:transparent;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px; text-decoration: none; margin: 12px 5px 5px 5px;transition:all 0.3s linear;border:1px solid #FFF;}
.action-nav ul.links li a:hover{margin-right: 13px;height: auto;padding: 0.75em 1.5em;background: #219ed2;position: relative;font-size: 0.95em;font-weight: bold;line-height: 1.75;letter-spacing: .04em;color: #fff!important;display: inline-block;vertical-align: middle;-webkit-tap-highlight-color:transparent;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px; text-decoration: none; margin: 12px 5px 5px 5px;border:1px solid #219ed2;}
.action-nav .nav-link.menu-mobile{display: none;font-family:entypo;height: 62px;line-height: 62px;float: left;padding: 0 22px; font-size: 42px;color: #353d40; cursor: pointer;width: 20px;text-align: center;}
.action-nav .nav-link.menu-mobile:hover,
.action-nav .nav-link.menu-mobile:active{color: #1a8cbb; background-color: #f2f2f2; }
.action-nav .nav-link.sharing{font-family:entypo;margin-top:0;font-size: 32px;padding: 0 10px;max-height: 36px;line-height: 36px;}
#site-header #register,#site-header #signin{display:none;}
#site-header.onscroll #register,#site-header.onscroll #signin{display:inline-block;}
.action-nav ul.links li a:hover,
.action-nav ul.links li a:active{ background: #1a8cbb;}
.action-nav ul.languages{margin-left: 20px;}
.action-nav ul.languages li .nav-link{text-align: center;height: 62px;line-height: 62px;padding: 0 18px;position:relative;font-size:0.8em;font-weight:bold;line-height:1.75;letter-spacing:.04em;color:#353d40;padding:20px 5px;display:inline-block;vertical-align:middle;-webkit-tap-highlight-color:transparent;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box; text-decoration: none; text-transform: uppercase;}
.action-nav .mobile-menu{display: none;}
.navigation .mobile{display: none;}
.action-nav ul.languages li .nav-link.active,
.action-nav ul.languages li .nav-link:hover{color:#1a8cbb;}
a.nav-link.gray{background: transparent;color: #219ed2 !important;border:1px solid #219ed2;margin: 20px 0px;display: inline-block;position: relative;font-size: 0.8em;font-weight: bold;line-height: 1.75;letter-spacing: .04em;text-align: center;text-decoration: none;padding: 0.57143em 1.42857em;max-width: 100%;-webkit-font-smoothing: antialiased;-webkit-border-radius: 4px 4px 4px 4px;-moz-border-radius: 4px 4px 4px 4px;border-radius: 4px 4px 4px 4px;-o-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-webkit-transition: all 0.2s ease;transition: all 0.2s ease;}
.icon-menu{display: block;overflow:hidden;font-family:entypo;}
.icon-close{display:none;}
.dinner-menu-show{overflow:hidden;}
.dinner-menu-show .icon-menu{display: none;}
.dinner-menu-show .icon-close{display:block;font-family:entypo;line-height:62px;}
.dinner-menu-show .nav-link.menu-mobile{/*background: #219ed2; */}
a.nav-link.gray:hover,
a.nav-link.gray:active{ background: #219ed2 !important;color: white !important;}
.dinner-menu-container {width: 100%;height: 0;top: 62px;left: 0;position: fixed;z-index:120000;display:none !important;overflow: auto;display: table;background-color: #f2f2f2;}
.dinner-menu-show .dinner-menu-container{z-index: 2000;height: 100%;display: block !important;}
.dinner-menu-container .dinner-menu {width: 100%;height: auto;display: table-cell;vertical-align: middle;top: -62px;position: relative;}
.dinner-menu-links-container {padding: 0;}
.dinner-menu-show .dinner-menu-container {-webkit-box-shadow: inset 0 2px 2px -2px rgba(6,8,8,0.15);box-shadow: inset 0 2px 2px -2px rgba(6,8,8,0.15);}
.dinner-menu-container .dinner-menu {top: 0px;display: block;overflow: auto;height: 100%;-webkit-overflow-scrolling: touch;}
.dinner-menu-container .links-list{padding: 0px;margin: 0px; margin-bottom: 90px;}
.dinner-menu-container .links-list li {line-height: 2em;list-style-type: none; padding: 0px;margin: 0px;}
.dinner-menu-container .links-list li a{position: relative;font-size: 14px;-webkit-font-smoothing: antialiased;font-weight: bold;line-height: 1.75;color: #3a3a3a!important;padding: 20px 18px;display:block;vertical-align: middle;-webkit-tap-highlight-color: transparent;text-decoration: none;border-left:4px solid #f2f2f2;}
.dinner-menu-container .links-list li:hover{background: white;}
.dinner-menu-container .links-list li a.active{border-left:4px solid #219ed2;}
.site-nav{display:inline-block;vertical-align:middle;}
.social{background:transparent;width:223px;height:0px;position:absolute;top:50px;transition:all 0.4s linear;border-radius:0 0 5px 5px;text-align:center;overflow:hidden;}
.social.open{top:50px;height:50px;padding-top:20px;}
#social-links{list-style-type:none;margin:0;padding:0;background:transparent;text-align:center;width:100%;box-sizing:border-box;height:50px;}
#social-links li{display:inline-block;width:30px;height:30px;}
#social-links li .social-links{display:inline-block;font-family:entypo-social;font-size:32px;color:#000;padding:0px 10px;line-height:32px;}
#social-links li .social-links:hover{background:#f2f2f2;}
#register.onscroll,#signin.onscroll{background: #219ed2;color:#FFF!important;}
#register.onscroll:hover,#signin.onscroll:hover{background:#005280;}
#overlay{
	/*background: -webkit-gradient(radial, center center, 0, center center, 460, from(rgba(65, 96, 118,0.01)), to(rgba(65, 96, 118,.7)));
	background: -webkit-radial-gradient(circle, rgba(65, 96, 118,0.01), rgba(65, 96, 118,.7));
	background: -moz-radial-gradient(circle, rgba(65, 96, 118,0.01), rgba(65, 96, 118,.7));
	background: -ms-radial-gradient(circle, rgba(65, 96, 118,0.01), rgba(65, 96, 118,.7));
	background: radial-gradient(circle, rgba(65, 96, 118,0.01), rgba(65, 96, 118,.7));*/
	background:transparent;
	position:absolute;width:100%;height:100%;
}

.entypo{font-family:entypo!important;}
.header, .header-register {
	position: relative;
	width: 100%;
	border-bottom: 4px solid #219ed0;
}

.header {
	-webkit-background-size: cover;
	     -o-background-size: cover;
	        background-size: cover;
}

.header_1 {
	background: url(../images/header.jpg) center top no-repeat fixed;background-size:cover;
}
/*
.header_2 {
	background: url(../images/headerbg-2.jpg) center top no-repeat fixed;
}

.header_3 {
	background: url(../images/headerbg-3.jpg) center top no-repeat fixed;
}*/
.header-register {
	background: url(../images/headerbg-register.jpg) center top no-repeat fixed;
}

.banner-header {
	position: relative;
	padding: 55px 0;
	min-height: 41px;
	color: rgb(71, 71, 71);
	margin-bottom: 40px;
	text-align: center;
	/*background: rgba(33, 158, 208, 0.55);*/
	top: 30%;
}
.banner-header h1{
	font-family:aleolight;font-size:62px;line-height:normal;
}
.banner-header h2{
	font-family:aleolight;font-size:40px;text-align:center;padding-top:10px;
}
.banner-header h1 span {
	color: #333333;
}
.banner-buttons{margin-top:60px;}
.banner-button{display:inline-block;}
.banner-button:first-child{margin-right:50px;}
.banner-button > a{display:block;border:1px solid #FFF;padding:10px;transition:all 0.3s linear;}
.banner-button > a:hover{background:#1a8cbb;border:1px solid #1a8cbb;}
.banner-button > a > span{color:#FFF;font-size:20px;display:inline-block;padding:10px;font-family:aleolight;vertical-align: middle;font-weight:100;}
.banner-button > a > span.entypo{font-size:40px;}
.banner-button > a > span:first-child{padding:10px 20px 10px 50px;}

/* Logo
-------------------------------------------------- */
#primary .logo {
	margin: 0;
	padding: 0;
	display: none;
}

.logo {
	float: left;
	margin-top: 45px;
	position: absolute;
	z-index: 1000000;
}

.logo img {
	display: block;
	max-height: 100%;
	width: auto;
}

.logo a {
	float: left;
	font-size: 40px;
	line-height: 40px;
	font-weight: 300;
	text-align: left;
}

.logo ._bg {
	background: none repeat scroll 0 0 #3398da;
	color: #FFFFFF;
	float: left;
	font-weight: 300;
	padding: 3px 10px 7px;
	position: relative;
	z-index: 1;
}

.logo ._u {
	float: left;
	color: #3398da;
	margin-left: -11px;
	padding: 3px 0 7px;
}

.logo ._u strong {
	color: #fff;
	font-weight: 300;
}

/*************************************************
Main Nav Style
*************************************************/

.connection {
	float: right;
	margin-top: 45px;
}

.btn-white {
	padding: 12px;
	background-color: rgba(255, 255, 255, 0.85);
}

#primary {
	position: fixed;
	top: 20px;
	right: 30px;
	z-index: 100000;
}

#primary li:before {
	border-right: 2px solid #219ed0;
	content: "";
	height: 24px;
	position: absolute;
	right: 0.21em;
	top: 16px;
}

#primary li:last-child:before {
	height: 0;
}

#primary li {
	display: list-item;
	height: 20px;
	list-style: none outside none;
	margin-top: 14px;
	position: relative;
	text-align: right;
}

#primary a {
	display: block;
	text-align: right;
	color: #219ed0;
	height: 100%;
}

#primary li a:hover, nav#primary li.active a {
	color: #34495e;
}

#primary a:before {
	float: right;
	margin-left: 10px;
	width: 10px;
	height: 10px;
	font-family: 'FontAwesome';
	content: "\f10c";
	font-size: 14px;
	color: #219ed0;
}

#primary li.active a:before {
	content: "\f111";
}

a.next-section {
	background: none repeat scroll 0 0 #219ed0;
	bottom: 0;
	color: #FFFFFF;
	font-size: 18px;
	left: 50%;
	margin-left: -20px;
	min-width: 12px;
	min-height: 21px;
	padding: 10px 15px;
	position: absolute;
	z-index: 100;
}

a.top-section {
	float: left;
	background: none repeat scroll 0 0 #219ed0;
	left: 50%;
	top: 0;
	color: #FFFFFF;
	font-size: 18px;
	min-width: 12px;
	min-height: 21px;
	margin-left: -20px;
	padding: 10px 15px;
	position: relative;
	z-index: 100;
}

#social-btn a:before, #social-btn li:before {
	content: none !important;
}

#facebook-nav, #twitter-nav, #google-nav, #linkedin-nav {
	width: 40px !important;
	height: 40px !important;
	margin: 20px 0 20px 75px;
	overflow: hidden;
	cursor: pointer;
	text-indent: -10000px;
}

#facebook-nav {
	background: url(../images/facebook.png) 0 0 no-repeat;
}

#facebook-nav:hover {
	background: url(../images/facebook.png) 0 -80px no-repeat;
}

#twitter-nav {
	background: url(../images/twitter.png) 0 0 no-repeat;
}

#twitter-nav:hover {
	background: url(../images/twitter.png) 0 -80px no-repeat;
}

#google-nav {
	background: url(../images/google.png) 0 0 no-repeat;
}

#google-nav:hover {
	background: url(../images/google.png) 0 -80px no-repeat;
}

#linkedin-nav {
	background: url(../images/linkedin.png) 0px 0px no-repeat;
}

#linkedin-nav:hover {
	background: url(../images/linkedin.png) 0px -80px no-repeat;
}

#about a.next-section, #services a.next-section, #portfolio a.next-section, #blog a.next-section, #priceplans a.next-section, #contact a.next-section, #newsletter a.next-section {
	bottom: -40px;
}

.navbar-inverse .btn-navbar {
	margin: 0;
	background: #005a88;
	border: none;
}

.navbar-inverse .btn-navbar:hover, .navbar-inverse .btn-navbar:focus, .navbar-inverse .btn-navbar:active, .navbar-inverse .btn-navbar.active, .navbar-inverse .btn-navbar.disabled, .navbar-inverse .btn-navbar[disabled] {
	color: #ffffff;
	background-color: #0084c8;
	*background-color: #0084c8;
}

.navbar-inverse .btn-navbar:active, .navbar-inverse .btn-navbar.active {
	background-color: #0084c8 \9;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Responsive Design Content
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#responsive_design {
	background: #fff /*url(../images/responsive-new.jpg) 0% 0 fixed*/;
	min-height: 510px;
	position: relative;
}

#responsive_design h2 {
	font-size: 31px;
	/*color: #fff;*/
	color: #34495e;
	text-align: center;
	margin-top: 0px;
}

#responsive_design .content {
	position: relative;
	top: 70px;
}

#responsive_design ul {
	position: relative;
	width: auto;
	text-align: center;
}

#responsive_design ul li {
	display: inline-block;
	vertical-align: bottom;
	text-align: center;
	margin: 5px 5px 10px 5px;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	ABOUT SECTION
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#about {
	background: #ffffff;
	position: relative;
	width: 100%;
}

#about .head, #services .head, #portfolio .head, #blog .head, #priceplans .head, #contact .head, #newsletter .head {
	position: relative;
	background: #219ed0;
	padding: 55px 0;
	min-height: 41px;
	color: #fff;
	margin-bottom: 40px;
	text-align: center;
}

.page_title {
	margin: 45px 0;
	position: relative;
	width: 100%;
	text-align: center;
	text-transform: uppercase;
}

.page_title .border {
	margin: 0 auto;
	padding: 0 10px;
	display: inline-block;
	background: url(../images/border.png) left bottom repeat-x;
}

.page_title .border span {
	font-family: 'Lato', sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: #34495e;
	padding-bottom: 10px;
	border-bottom: 3px solid #fff;
	display: inline-block;
	min-width: 120px;
	margin: 0;
}

.bloc-text-grey {
	text-align: center;
	padding: 20px;
	font-weight: 400;
	font-size: 14px;
	background-color: #f0f0f0;
	min-height: 160px;
}

.title-business-unit {
	padding: 40px 0;
	background-color: #f6f6f6;
	color: #219ed0;
	text-align: center;
}

#about .message {
	margin-bottom: 60px;
	text-align: center;
}

.item_box {
	background: url(../images/white_bg.png) top center no-repeat #f0f0f0;
	min-height: 300px;
	border-bottom: 1px solid #219ed0;
	margin-bottom: 40px;
	padding: 20px;
	text-align: center;
}

.item_box .icon {
	position: relative;
	width: 70px;
	height: 70px;
	margin: 0 auto;
	background-repeat: no-repeat;
	background-position: center top;
	transition-duration: 0.5s;
	-webkit-transition-duration: 0.5s; /* Safari */
}

.item_box:hover .icon {
	background-position: center bottom;
}

.item_box .icon.user {
	background-image: url(../images/user.png);
}

.item_box .icon.rocket {
	background-image: url(../images/rocket.png);
}

.item_box .icon.hand {
	background-image: url(../images/hand.png);
}

.item_box h3 {
	margin: 70px 0 20px;
	color: #219ed0;
	font-weight: 300;
}

.item_box p {
	font-size: 14px;
	color: #777777;
	line-height: 22px;
}

.item_box:hover {
	border-color: #6bc2bf;
}

.item_box:hover > h3 {
	color: #6bc2bf;
}

.item_box > p {
	font-weight: 400;
	font-size: 15px;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	TEAM SECTION
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.team {
	position: relative;
	width: 100%;
	background: #fff;
	margin-bottom: 70px;
	-webkit-transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
	-moz-transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
	-ms-transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
	-o-transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
	transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750); /* linear */
}

.team .member_photo {
	width: 100%;
	position: relative;
}

.team .member_photo img {
	width: 100%;
	position: relative;
}

.team .social {
	position: relative;
	background: #fff;
	overflow: hidden;
	height: 0;
}

.team:hover .social {
	height: 70px;
	opacity: 1;
}

.team .social ul {
	width: 100%;
	padding: 10px 0;
	position: relative;
	text-align: center;
}

.team .social ul li {
	display: inline-block;
	list-style: none;
}

.team .social ul li a {
	display: inline-block;
	color: #c4e2f4;
	font-size: 36px;
	margin: 5px;
	line-height: 20px;
}

.team .social ul li a:hover {
	color: #219ed0;
}

.team .member_info {
	position: relative;
	background: #f6f6f6;
	padding: 20px 0;
	text-align: center;
}

.team .member_info h4 {
	color: #777777;
	font-size: 16px;
	font-weight: 400;
	margin-bottom: 7px;
}

.team .member_info i {
	font-size: 14px;
	font-style: italic;
	color: #3398da;
}

.team:hover .member_info {
	background: #219ed0;
	color: #fff;
}

.team:hover .member_info h4, .team:hover .member_info i {
	color: #fff;
}

.skill {
	background: #f0f0f0;
	padding: 20px 0;
	text-align: center;
}

.skill_graph {
	margin: 10px 0;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	PARALLAX 01
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#parallax1, #parallax1-register {
	width: 100%;
	position: relative;
	height: 500px;
	text-align: center;
}

#parallax1 {
	background: url(../images/paralax-1.jpg) 50% 0 no-repeat fixed;
}

#parallax1-register {
	background: url(../images/parallax-company.jpg) 50% 0 no-repeat fixed;
}

#parallax1 h2 {
	position: relative;
	padding-top: 200px;
	font-weight: 300;
	color: #fff;
	line-height: 50px;
}

#parallax1 span {
	display: block;
	font-size: 18px;
	padding-top: 30px;
	color: #fff;
	font-weight: 700;
}

.citation-parallax {
	background-color: rgba(33, 158, 208, 0.9);
	font-size: 36px;
	font-style: italic;
	margin: auto;
	padding: 15px;
	text-align: center;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	SERVICES SECTION
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#services {
	background: #fff;
	position: relative;
	width: 100%;
	padding-bottom: 30px;
}

#services .message {
	position: relative;
	margin-bottom: 70px;
	text-align: center;
}

.field {
	font-style: italic !important;
	text-align: center;
}

.star-field {
	color: #d72027;
}

.form-group {
	display: inline-block;
	margin-bottom: 0;
	vertical-align: middle;
	margin-bottom: 15px;
}

#services blockquote {
	font-size: 20px;
	font-weight: 300;
	font-style: italic;
	line-height: 30px;
	border: none;
}

.postby {
	font-size: 11px;
	line-height: 15px;
	font-weight: 700;
}

.postby strong {
	color: #219ed0;
	font-size: 16px;
}

.service_box {
	width: 100%;
	height: 215px;
	margin-bottom: 20px;
	overflow: hidden;
	position: relative;
	text-align: center;
	float: left;
}

.service_normal {
	position: relative;
	width: 100%;
	float: left;
}

.service_icon_wrap {
	float: left;
	position: relative;
	width: 100%;
	min-height: 150px;
	margin-bottom: 20px;
	background: #f0f0f0 url(../images/white_bg.png) center top no-repeat;
}

.service_icon {
	position: relative;
	width: 80px;
	height: 80px;
	left: 50%;
	margin-left: -40px;
	margin-top: 15px;
	overflow: hidden;
}

.service_icon img {
	position: absolute;
	left: 0;
	top: 0;
}

.service_box:hover .service_icon img {
	position: absolute;
	left: 0;
	top: -80px;
}

.service_box h4 {
	font-size: 20px;
	font-weight: 300;
	color: #219ed0;
	text-transform: uppercase;
}

.service_hover {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 215px;
	left: 0;
	background: #219ed0;
	color: #fff;
}

.service_hover p, .service_hover a {
	float: left;
	position: relative;
	padding: 30px 15px;
	font-size: 14px;
	line-height: 22px;
	color: #fff;
	font-weight: 400;
}

.service_box:hover .service_hover {
	top: 0;
}

.bg-form {
	background-color: #F0F0F0;
	border-bottom: 2px solid #219ED0;
	border-top: 2px solid #219ED0;
	margin: 30px 0 45px;
	padding: 20px 20px 5px;
}

.help-block {
	font-style: italic;
	font-size: 12px;
	color: #b4b4b4;
	text-align: right;
}

.register {
	margin: 45px 0px 15px;
}

.btn-submit {
	border-top: 2px solid #219ED0;
	padding: 30px 0;
	position: relative;
	text-align: center;
}

.banner-register {
	color: #FFFFFF;
	height: 770px;
	overflow: hidden;
	text-align: center;
	width: 100%;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	PARALLAX 02
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#parallax2 {
	background: url(../images/parallax-2bg.png) 50% 0 no-repeat fixed;
	position: relative;
	width: 100%;
	text-align: left;
}

#parallax2-register {
	background: url(../images/parallax-bank.jpg) 50% 0 no-repeat fixed;
	position: relative;
	width: 100%;
	height: 500px;
}

#parallax2 .content {
	position: relative;
	padding: 50px 0;
	width: 65%;
	min-height: 500px;
}

.text-parallax-2 {
	background-color: rgba(33, 158, 208, 0.8);
	padding: 15px;
	text-align: left;
	margin-bottom: 50px;
}

#iphone {
	position: absolute;
	bottom: 0;
	right: 0;
}

#parallax2 h1, h2 {
	text-align: left;
color: rgb(71, 71, 71);
	line-height: 48px;
	font-family: 'Lato';
	font-weight:bold;
}

#parallax2 h1 {
	font-weight: 700;
	font-size: 40px;
}

#parallax2 h2 {
	font-weight: 300;
	font-size: 34px;
	padding-bottom: 30px;
}

#parallax2 p {
	font-size: 22px;
	color: #fff;
	line-height: 30px;
	text-align: left;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	PORTFOLIO STYLE
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#portfolio {
	background: #fff;
	position: relative;
	width: 100%;
}

/*-- PORTFOLIO FILTER NAVIGATION ---*/
.filter {
	width: 100%;
	float: left;
	padding: 40px 0 35px;
}

.filter ul {
	float: left;
	margin: 0;
	padding: 0;
	text-align: left;
}

.filter li {
	background: none;
	display: inline;
}

.filter li:last-child {
	background: none;
}

.filter li:last-child a {
	margin: 2px;
}

.filter li a {
	font-size: 13px;
	line-height: 13px;
	font-weight: 300;
	color: #777777;
	text-transform: uppercase;
	text-decoration: none;
	margin-right: 6px;
	margin-bottom: 5px;
    cursor: pointer;
	padding: 8px 10px 10px 10px;
	display: inline-block;
	position: relative;
}
.filter li a .new{
	background: #219ed2;
	position: absolute;
	right: 0px;
	top: -10px;
	width: 30px;
	height: 15px;
	font-size: 10px;
	line-height: 15px;
	color: white;
	text-align: center;
}
.filter li a:hover {
	color: #fff;
	background-color: #34495e;
}

.filter li.current a {
	color: #fff;
	background-color: #34495e;
}

.filter li span {
	font-size: 11px;
	color: #ccc;
}

/*------------- portfolio image ---------------*/

span.roll {
	position: absolute;
	z-index: 10;
	-webkit-box-shadow: 0px 0px 4px #000;
	-moz-box-shadow: 0px 0px 4px #000;
	box-shadow: 0px 0px 4px #000;
}

.sfr {
	background: url(../images/gallery/plus.png) center center no-repeat #000;
}

.kia {
	background: url(../images/gallery/logo-kia-hover.png) center center no-repeat #000;
}

.range {
	background: url(../images/gallery/logo-range-hover.png) center center no-repeat #000;
}

.microsoft {
	background: url(../images/gallery/logo-microsoft-hover.png) center center no-repeat #000;
}

.laredoute {
	background: url(../images/gallery/logo-laredoute-hover.png) center center no-repeat #000;
}

.xbox {
	background: url(../images/gallery/logo-xbox-hover.png) center center no-repeat #000;
}

.mentos {
	background: url(../images/gallery/logo-mentos-hover.png) center center no-repeat #000;
}

.sephora {
	background: url(../images/gallery/logo-sephora-hover.png) center center no-repeat #000;
}

.marie {
	background: url(../images/gallery/logo-dior-hover.png) center center no-repeat #000;
}

.nissan {
	background: url(../images/gallery/logo-nissan-hover.png) center center no-repeat #000;
}
.kooples {
    background: url(../images/gallery/logo-kooples-hover.png) center center no-repeat #000;
}
.canalplus {
    background: url(../images/gallery/logo-canalplus-hover.png) center center no-repeat #000;
}

.kelloggs {
	background: url(../images/gallery/logo-kelloggs-hover.png) center center no-repeat #000;
}

.societe {
	background: url(../images/gallery/logo-societe-hover.png) center center no-repeat #000;
}

.nivea {
	background: url(../images/gallery/logo-nivea-hover.png) center center no-repeat #000;
}

.bnp {
	background: url(../images/gallery/logo-bnp-hover.png) center center no-repeat #000;
}

.gemey {
	background: url(../images/gallery/logo-gemey-hover.png) center center no-repeat #000;
}

.roll300x200 {
	/*width: 300px;*/
	/*height: 200px;*/
	width: 100%;
	height: 100%;
}

.roll640x400 {
	/*width: 640px;*/
	/*height: 400px;*/
	width: 100%;
	height: 100%;
}

.roll220x400 {
	/*width: 220px;*/
	/*height: 400px;*/
	width: 100%;
	height: 100%;
}

.roll500x200 {
	/*width: 500px;*/
	/*height: 200px;*/
	width: 100%;
	height: 100%;
}

.roll340x200 {
	/*width: 340px;*/
	/*height: 200px;*/
	width: 100%;
	height: 100%;
}

.portfolio-grid {
	float: left;
	width: 100%;
	margin-bottom: 80px;
}

.portfolio-grid ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.portfolio-grid ul li {
	float: left;
	display: inline;
	position: relative;
	width: 300px;
	margin: 0;
	padding: 0;
	transition: all 500ms ease 0s;
}

.portfolio-grid ul li img {
	/*float: left;*/
	transition: all 0.5s ease 0s;
}

.portfolio-grid ul li.col2 {
	width: 220px;
}

.portfolio-grid ul li.col22 {
	width: 470px;
}

.portfolio-grid ul li.col3 {
	width: 340px;
}

.portfolio-grid ul li.col4 {
	width: 500px;
}

.portfolio-grid ul li.col8 {
	width: 640px;
}

.jquery_popup {
	position: relative;
}

.port_left {
	float: left;
	width: 37%;
}

.port_right {
	float: right;
	width: 57%;
	padding: 0 3%;
}

.project {
	position: relative;
}

.project_details h2 {
	color: #fff;
	margin-bottom: 20px;
}

.project_details p {
	color: #fff;
	line-height: 24px;
	margin-bottom: 30px;
}

.pop_image {
	position: relative;
	overflow: hidden;
	border: 1px, solid;
	border-color: white;

}

.zoom {
	font-family: 'FontAwesome';
	font-size: 18px;
	color: #fff;
	background: #219ed0;
	padding: 20px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -30px 0 0 -30px;
}

.bg-overlay {
	background: url(../images/pattern.png) repeat;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

/*--------------------------------------------------
		    PORTFOLIO THUMBNAIL HOVER
---------------------------------------------------*/

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	PARALLAX 03
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#parallax3 {
	width: 100%;
	position: relative;
	text-align: center;
	height: auto;
	background: url(../images/paralax-2.jpg) 50% 0 no-repeat fixed;
}

#parallax3-register {
	width: 100%;
	position: relative;
	background: url(../images/parallax-user.jpg) 50% 0 no-repeat fixed;
	height: 500px;
}

#parallax3 h1 {
	position: relative;
	padding-top: 100px;
	font-weight: 300;
	color: #fff;
	line-height: 50px;
}

#parallax3 ul {
	float: left;
	width: 100%;
	margin: 50px 0;
	padding: 0;
	list-style: none;
	display: block;
}

#list-clients {
	margin: 80px 0 100px;
	height: 506px;
	width: 100%;
	position: relative;
}

#clients li {
	float: left;
	height: 100%;
	font-size: 40px;
	color: #fff;
	text-align: center;
	vertical-align: middle !important;
	padding: 0;
	margin: 10px;
	display: block;
}

.clients_control {
	position: relative;
	overflow: hidden;
	width: 100%;
	display: none;
}

.clients_control a {
	font-size: 30px;
	color: #fff;
}

.clients_control > .next {
	float: right;
	position: relative;
	right: 20px;
}

.clients_control > .prev {
	float: left;
	position: relative;
	left: 20px;
}

.image_carousel {
	padding: 15px 0 15px 40px;
}

.image_carousel img {
	padding: 9px;
	margin: 7px;
	display: block;
	float: left;
}

.clearfix {
	float: none;
	clear: both;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	NEWS BLOG
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#blog {
	background: #fff;
	position: relative;
	width: 100%;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	PARALLAX 04
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#parallax4 {
	width: 100%;
	position: relative;
	text-align: center;
	height: 400px;
	background: #06455e url(../images/parallax-04.jpg) 50% 0 no-repeat fixed;
}

#parallax4 h1 {
	position: relative;
	font-size: 44px;
	padding-top: 86px;
	font-weight: 300;
	color: #fff;
	line-height: 50px;
	margin-bottom: 30px;
}

#parallax4 h3 {
	font-size: 22px;
	color: #fff;
	line-height: 24px;
	margin-bottom: 50px;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	PRICE PLANS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#priceplans {
	background: #fff;
	position: relative;
	width: 100%;
	padding-bottom: 40px;
}

.plans {
	width: 100%;
	text-align: center;
	margin: 30px 0 50px 0;
	background: #219ed0;
	-webkit-transition: all .25s;
	-moz-transition: all .25s;
	-ms-transition: all .25s;
	-o-transition: all .25s;
	transition: all .25s;
}

.plans:hover {
	-webkit-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, .15);
	box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, .15);
	-webkit-transform: scale(1.04);
	-moz-transform: scale(1.04);
	-ms-transform: scale(1.04);
	-o-transform: scale(1.04);
	transform: scale(1.04);
}

.planContainer .title {
	background: #34495e;
	padding: 20px;
	color: #fff;
}

.planContainer .title i {
	position: relative;
	display: block;
	padding-top: 8px;
}

.planContainer .title h3 {
	padding: 5px 0 2px;
}

.planContainer .price {
	padding: 45px 0 38px;
	background: #fff;
}

.planContainer .price h1 {
	font-size: 60px;
	font-weight: 900;
	line-height: 50px;
}

.planContainer .price h1 sup {
	font-size: 15px;
	line-height: 15px;
	font-weight: 300;
	top: -35px;
}

.planContainer .price h1 span {
	font-size: 15px;
	line-height: 15px;
	font-weight: 400;
}

.planContainer .options {
	margin-top: 0;
}

.planContainer .options li {
	padding: 20px 0;
	background: #fff;
}

.planContainer .options li:nth-child(2n+0) {
	background: #f0f0f0;
}

.planContainer .button, #plans .team .button:hover {
	color: #fff;
	background: #34495e;
}

.planContainer .button:hover, #plans .team .button {
	background: #219ed0;
}

.planContainer .button a {
	color: #fff;
	font-size: 20px;
	text-transform: uppercase;
	font-weight: 400;
	padding: 25px;
	display: block;
}

#plans .team .title {
	background: #219ed0 url(../images/new.png) right top no-repeat;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	PARALLAX 04
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#parallax5 {
	width: 100%;
	position: relative;
	text-align: center;
	min-height: 400px;
	background: #07455E url(../images/twitter.jpg) 80% 0 no-repeat fixed;
}

#parallax5 h2 {
	position: relative;
	font-size: 44px;
	padding-top: 86px;
	font-weight: 300;
	color: #fff;
	line-height: 50px;
	margin-bottom: 50px;
	text-align: left;
}

#parallax5 h3 {
	font-size: 22px;
	color: #fff;
	line-height: 24px;
	margin-bottom: 35px;
}

#parallax5 h4 {
	font-style: italic;
	color: #fff;
}

.tweet {
	font-size: 22px;
	color: #fff;
	line-height: 24px;
	margin-bottom: 35px;
}

.timePosted {
	font-size: 22px;
	font-style: italic;
	color: #fff;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	CONTACT SECTION
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#contact {
	background: #fff;
	position: relative;
	width: 100%;
	text-align: center;
}

#contact P {
	font-size: 16px;
	line-height: 24px;
	font-weight: 300;
}
#contact .circle{
	background-color: #F0F0F0;
	width: 160px;
	height: 160px;
	margin: 0 auto;
	display: block;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	background-size: 100% auto;
	background-position: center center;
}
#contact .circle-1{
	background-image: url(../images/circle-1.png);
}
#contact .circle-2{
	background-image: url(../images/circle-2.png);
}
#contact .circle-3{
	background-image: url(../images/circle-3.png);
}
#contact .circle-4{
	background-image: url(../images/circle-4.png);
}

#contact p.info-small{
	font-size: 14px;
	line-height: 22px;
}
#contact p.cartouche-text{
	text-transform: uppercase;
	font-size: 18px;
	font-weight: 300;
	font-family: 'neutra_textdemi_sc';
	text-align: center;
	background-color: #34495e;
	display: block;
	width: 180px;
	margin: 0 auto;
	color: #FFFFFF;
	padding: 4px 0px;
	margin-top: -10px;
	margin-bottom: 10px;
}

#contact P strong {
	font-size: 20px;
	font-weight: 300;
}

.mailFromDiv {
	position: relative;
	overflow: hidden;
}

#contact input[type="text"], #contact input[type="email"], #contact textarea {
	width: 100%;
	padding: 10px 0;
	border-radius: 0;
	border: none;
	box-shadow: none;
	border-bottom: 1px solid #34495e;
	margin-bottom: 10px;
}

#contact input[type="email"] {
	border-bottom: 1px solid #b7dbf2;
}

#contact textarea {
	border-bottom: 1px solid #b7dbf2;
}

#contact input[type="submit"], #contact .submit {
	border: none;
	padding: 10px 20px;
	margin: 10px 8px;
	float: right;
	background: #219ed0;
	color: #fff;
}

#contact input[type="submit"]:hover, #contact .submit:hover {
	background: #147CC1;
}

/*Error Message*/
.er {
	color: #AB0000 !important;
	border-color: #AB0000 !important;
}

.er:focus {
	color: #0099ff !important;
}

.er:focus {
	color: #0099ff !important;
	border-color: #B7DBF2 !important;
}

#name.er:focus {
	border-color: #34495E !important;
}

.error {
	float: left;
	color: #AB0000;
	font-size: 12px;
	font-weight: bold;
}

.error p {
	text-align: left;
	margin-bottom: 0;
}

/* Congratulation message */
.mailSuccessDiv {
	display: none;
	width: 100%;
	color: #34495e;
	font-size: 24px;
	font-weight: 400;
	text-align: center;
	margin-bottom: 20px;
}

/*-------------------------------------------------------------*/
.social_link {
	text-align: center;
	min-height: 100px;
	margin: 40px 0 65px 0;
}

.social_link li {
	display: inline-block;
	text-align: center;
	margin: 5px;
}

.social_link li a {
	position: relative;
	overflow: hidden;
	border: 1px solid #ebebeb;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	display: block;
	-webkit-transition: all .25s;
	-moz-transition: all .25s;
	-ms-transition: all .25s;
	-o-transition: all .25s;
	transition: all .25s;
}

.social_link li a:hover {
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-ms-transform: scale(1.2);
	-o-transform: scale(1.2);
	transform: scale(1.2);
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	FOOTER SECTION
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.footer_top, .footer_top-register {
	float: left;
	width: 100%;
	/*background: #219ed0;*/
	border-top: 4px solid #219ed0;
}



.footer_top-register {
	background: url(../images/headerbg-register.jpg) no-repeat center top;
}

.footer_top .container, .footer_top-register .container {
	margin-bottom: 30px;
	margin-top: 30px;
}

.footer_top p, .footer_top-register p {
	font-size: 12px;
}

.footer_top .content, .footer_top-register .content {
	float: left;
	margin-left: 25%;
	width: 50%;
	padding: 50px 0;
}

.foot_logo {
	float: left;
	position: relative;
	margin-left: -48px;
	z-index: 1;
}

.foot_logo a {
	float: left;
	font-size: 40px;
	line-height: 40px;
	font-weight: 300;
	text-align: left;
}

.foot_logo ._bg {
	color: #FFFFFF;
	float: left;
	font-weight: 300;
	padding: 3px 10px 7px;
	position: relative;
	z-index: 1;
}

.foot_logo ._u {
	float: left;
	color: #3398da;
	margin-left: -11px;
	padding: 3px 0 7px;
}

.foot_logo ._u strong {
	color: #34495e;
	font-weight: 300;
}

.copyright {
	float: right;
	padding-top: 20px;
	/*margin-right: 50px;*/
	font-size: 16px;
	color: #777777;
}

.footer_bottom {
	float: left;
	width: 100%;
	margin-top: 60px;
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	NEWSLETTER SECTION
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#newsletter {
/*	background: #fff;*/
	position: relative;
	width: 100%;
	text-align: center;
}

#newsletter P {
	font-size: 44px;
	font-weight:300;
	line-height: 44px;
	font-weight: 300;
	color:#FFF;
	font-family:lato;
}
#mce-EMAIL{padding:0 0 0 25px!important;border-radius:50px 50px 50px 50px!important;background:rgba(255,1255,255, 0.6);height:60px;box-sizing:border-box;}
#newsletter P.border{background:url('../images/border_white.png') left bottom repeat-x;}
#mc-embedded-subscribe-form h4{text-align:center;padding-bottom:10px;}
#newsletter P span{color:#FFF;}
#newsletter .circle{
	background-color: #F0F0F0;
	width: 160px;
	height: 160px;
	margin: 0 auto;
	display: block;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	background-size: 100% auto;
	background-position: center center;
}
#newsletter p.info-small{
	font-size: 14px;
	line-height: 22px;
}
#newsletter p.cartouche-text{
	text-transform: uppercase;
	font-size: 18px;
	font-weight: 300;
	font-family: 'neutra_textdemi_sc';
	text-align: center;
	background-color: #34495e;
	display: block;
	width: 180px;
	margin: 0 auto;
	color: #FFFFFF;
	padding: 4px 0px;
	margin-top: -10px;
	margin-bottom: 10px;
}

#newsletter P strong {
	font-size: 20px;
	font-weight: 300;
}

.mailFromDiv {
	position: relative;
	overflow: hidden;
}

#newsletter input[type="text"], #newsletter input[type="email"], #newsletter textarea {
	width: 100%;
	padding: 10px 0;
	border-radius: 0;
	border: none;
	box-shadow: none;
	border-bottom: 1px solid #34495e;
	margin-bottom: 10px;
}

#newsletter input[type="email"] {
	border-bottom: 1px solid #b7dbf2;
}

#newsletter textarea {
	border-bottom: 1px solid #b7dbf2;
}

#newsletter input[type="submit"], #newsletter .submit {
	border: none;
	padding: 10px 20px;
	margin: 10px 0;
	background: #219ed0;
	color: #fff;
	margin:0 auto;
}

#newsletter input[type="submit"]:hover, #newsletter .submit:hover {
	background: #147CC1;
}
#mc_embed_signup .button{line-height:13px!important;outline:none!important;}
#mc_embed_signup{background:transparent!important;}
#newsletter{
	background:url(../images/newsletter.jpg) 50% 0 no-repeat fixed;
	background-attachment: scroll;
/*	position:relative;
	z-index:0;
	overflow: hidden;
	padding: 0;
	-webkit-background-size: cover !important;
	   -moz-background-size: cover !important;
		-ms-background-size: cover !important;
		 -o-background-size: cover !important;
			background-size: cover !important;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/backgrounds/bg9.jpg', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/backgrounds/bg9.jpg', sizingMethod='scale')";*/
}
.newsletter-overlay{
	background:none;
	background-color:rgba(0,0,0,0.6);
	-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);
	zoom:1;
	position:absolute;
	width:100%;
	height:100%;
}
.newsletter{
	height:400px;padding-top:100px;
}
#overlay{
	/*background: -webkit-gradient(radial, center center, 0, center center, 460, from(rgba(65, 96, 118,0.01)), to(rgba(65, 96, 118,.7)));
	background: -webkit-radial-gradient(circle, rgba(65, 96, 118,0.01), rgba(65, 96, 118,.7));
	background: -moz-radial-gradient(circle, rgba(65, 96, 118,0.01), rgba(65, 96, 118,.7));
	background: -ms-radial-gradient(circle, rgba(65, 96, 118,0.01), rgba(65, 96, 118,.7));
	background: radial-gradient(circle, rgba(65, 96, 118,0.31), rgba(65, 96, 118,.7));*/
	background:transparent;
	position:absolute;width:100%;height:100%;
}

/*~~~~~~~~~~~~~~~~~~~
Test modal
~~~~~~~~~~~~~~~~~~~~~~*/
.test_modal {
	position: absolute;
	z-index: 10000;
	background: #666;
	width: 1000px;
	height: 200px;
}

.foot_absulet {
	position: absolute;
	bottom: 0;
	width: 100%;
}

/*```````````````````````
/* RESPONSIVE CSS
````````````````````````````` */

@media (max-width: 979px){
	.navigation nav{ display: block; float: left;margin-left:0%;}
}

@media (min-width: 940px) {
	#parallax1, #parallax2, #parallax3, #parallax4, #parallax5 {
		/*background-size: auto, cover;*/
		background-size: cover;
	}
}

@media (max-width: 979px) {
	h1 {
		font-size: 2.375em;
		margin: 0;
	}

	h2 {
		color: #2A323A;
		font-size: 2.137em;
	}

	h3 {
		font-size: 1.425em;
	}

	h4 {
		font-size: 1.068em;
	}

	h5 {
		font-size: .831em;
	}

	p {
		font-family: lato;
		font-size: .95em;
		font-weight: 300;
		margin: 0 0 10px;
		line-height: 1.425em;
	}
	.banner-header h2{
		color:#FFF;font-size:30px;
	}
	.banner-buttons{margin-top:30px;}

	/*~~~~~~~~~~~~~~
	Slider Carousel
	~~~~~~~~~~~~~~~~~~~~~~~~~*/
	.carousel .item {
		height: 500px;
	}

	.carousel img {
		width: auto;
	}

	.carousel-caption h1 {
		font-size: 30px;
	}

	.carousel-control.right {
		right: 0;
	}

	.carousel-control.left {
		left: 0;
	}

	/* ~~~
	parallax2
	~~~~~~~~~~~~~~~*/
	#iphone {
		width: 80%;
	}
	.navigation{width:510px;margin-left:10px;}
	.main-navigation.onscroll .container .navigation{width:555px;margin-left:-2px;}
	#logo.onscroll{width:155px;min-width:155px;height:42px;max-height:42px;margin:10px 0;display:inline-block;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
	.navigation .site-nav ul li .nav-link{padding:10px 5px;line-height:42px;font-size:0.8em;}
	.action-nav ul.links li a{margin-right: 13px;height: auto;padding: 0.75em 1.5em;position: relative;font-size: 0.8em;font-weight: bold;line-height: 1.75;letter-spacing: .04em;color: white;display: inline-block;vertical-align: middle;-webkit-tap-highlight-color:transparent;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px; text-decoration: none; margin: 12px 0px 5px 5px;}
	.action-nav ul.links li a:hover{margin-right: 13px;height: auto;padding: 0.75em 1.5em;position: relative;font-size: 0.8em;font-weight: bold;line-height: 1.75;letter-spacing: .04em;color: white;display: inline-block;vertical-align: middle;-webkit-tap-highlight-color:transparent;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px; text-decoration: none; margin: 12px 0px 5px 5px;}
	#site-header.onscroll .action-nav ul.links li a{margin-right: 13px;height: auto;padding: 0.75em 1.5em;background: #219ed2;position: relative;font-size: 0.8em;font-weight: bold;line-height: 1.75;letter-spacing: .04em;color: white;display: inline-block;vertical-align: middle;-webkit-tap-highlight-color:transparent;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px; text-decoration: none; margin: 12px 0px 5px 5px;}
	#site-header.onscroll .action-nav ul.links li a:hover{margin-right: 13px;height: auto;padding: 0.75em 1.5em;background: #005580;position: relative;font-size: 0.8em;font-weight: bold;line-height: 1.75;letter-spacing: .04em;color: white;display: inline-block;vertical-align: middle;-webkit-tap-highlight-color:transparent;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px; text-decoration: none; margin: 12px 0px 5px 5px;}
}

@media (min-width: 768px) and (max-width: 979px) {

	#contact .circle{
		width: 140px;
		height: 140px;
	}
	#contact p.cartouche-text{
		width: 160px;
	}
	#contact p.info-small{
		font-size: 12px;
		line-height: 20px;
	}

}

@media (max-width: 768px) {
	#home {
		padding-top: 66px;
	}

	#home .logo {
		display: none;
	}

	#primary .logo a {
		font-size: 28px;
		line-height: 28px;
	}

	#primary .logo ._bg {
		padding: 1px 5px 3px;
	}

	#primary .logo ._u {
		padding: 1px 0 7px;
	}

	#primary .logo {
		display: block;
	}

	#primary {
		top: 0;
		right: 0;
		width: 90%;
		padding: 2% 5%;
		height: 35px;
		margin: 0;
		position: fixed;
		background: #0e6dac;
	}
	#list-clients{
		height: auto;
	}

	#primary .btn-navbar {
		margin: 5px;
	}

	#primary li:before {
		display: none;
	}

	#primary a:before {
		display: none;
	}

	#primary .nav-collapse {
		background: url(../images/transparent.png) left top repeat;
		width: 100%;
	}

	#primary ul {
		position: relative;
		overflow: hidden;
	}

	#primary li {
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0;
		text-align: left;
	}

	#primary li a {
		min-width: 200px;
		text-align: left;
		padding: 10px 20px;
		font-size: 16px;
		line-height: 20px;
		color: #fff;
	}

	#primary li.active a, #primary li a.active, #primary li a:hover {
		background: #f9f9f9;
		color: #34495E !important;
	}

	#parallax3 ul {
		margin-bottom: 0;
	}

	.clients_control {
		display: block;
	}

	/* Portfolio */
	.portfolio-grid ul li {
		width: auto !important;
	}

	.service_hover p, .service_hover a {
		font-size: 13px;
		line-height: 17px;
	}




	#contact  .span3 {
	float: left;
	width: 46%;
	margin-bottom: 20px;
	}
}
@media (min-width: 765px){
	.dinner-menu-container{display:none!important;}
}
@media (max-width: 765px) {
	/*~~~~~~~~~~~~~~
	 Carosul
	~~~~~~~~~~~~~~~*/
	.team_skills .span3 {
		float: left;
		width: 46%;
	}

	.team_skills .span3:nth-child(2n+0) {
		margin-left: 8%;
	}

	.service_box_wrap .span3 {
		float: left;
		width: 46%;
	}

	.service_box_wrap .span3:nth-child(2n+0) {
		margin-left: 8%;
	}

	.service_hover p, .service_hover a {
		font-size: 14px;
		line-height: 22px;
	}

	.footer_top .content {
		padding: 20px 0;
	}
	#list-clients{
		height: auto;
	}
	#responsive_design{
		min-height: 430px;
	}
	.navigation .action-nav .nav-link.menu-mobile{display:block;position:absolute;top:0;right:20px;}
	.navigation nav ul{display:none;}
	.navigation nav.action-nav{position:static;}
	#site-header.onscroll .navigation{position:static;}
	#signin {
		position: absolute!important;
		left: 43%;
		display: none;
		z-index:1000000;
		top:12px;
	}
	#sharing {
		position:absolute;left:50%;margin-left:80px;top:12px;
	}
	#social{position:absolute;left:40%;top:50px;}
	.site-nav,.register{display:none!important;}
	#logo{width:200px;min-width:155px;height:42px;max-height:42px;margin:10px 0;display:inline-block;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
	#logo h1{width:155px;height:42px;display:block;background:transparent url("../images/ayl-logo-dark.png") no-repeat center center; background-size:100% auto;margin: 0px; padding: 0px;}
	#site-header{background:#FFF;box-shadow: 0 0 2px rgba(6,8,8,0.15);}
	#signin{background:#259ed2;font-size:0.95em!important;}
	.nav-link.menu-mobile{color:#474747!important;}
	.main-navigation{padding-top:0!important;}
	.main-navigation>.container>hgroup, .main-navigation>.container>hgroup > h1, #logo, #logo h1{width:125px;min-width:125px;}
	#site-header.onscroll .main-navigation>.container>hgroup, #site-header.onscroll .main-navigation>.container>hgroup > h1, #site-header.onscroll #logo, #site-header.onscroll #logo h1{width:125px;min-width:125px;}
	#newsletter P {
		font-size: 34px;
		font-weight:300;
		line-height: 34px;
		font-weight: 300;
		color:#FFF;
		font-family:lato;
	}
	.banner-header h1{font-size:55px;font-weight:bold}
	.banner-header{padding:0;}
}

@media (max-width: 685px) {
	/* portfolio*/
	.portfolio-grid ul li.col8 {
		max-width: 100% !important;
	}

}

@media (max-width: 600px) {
	/* portfolio*/
	.portfolio-grid ul li.col8 {
		max-width: 100% !important;
	}
	.banner-header{padding:0;}
	.banner-header h1{
		font-family:aleolight;font-size:35px;line-height:normal;
	}
	.banner-header h2{
		font-family:aleolight;font-size:25px;text-align:center;padding-top:10px;line-height:30px;
	}
	.banner-header h1 span {
		color: #333333;
	}
	.banner-buttons{margin-top:50px;}
	.banner-button{display:inline-block;}
	.banner-button:first-child{margin-right:30px;}
	.banner-button > a{display:block;border:1px solid #FFF;padding:5px;}
	.banner-button > a > span{color:#FFF;font-size:20px;display:inline-block;padding:5px;font-family:aleolight;vertical-align: middle;font-weight:100;}
	.banner-button > a > span.entypo{font-size:40px;}
	.banner-button > a > span:first-child{padding:5px 10px 5px 30px;}


}

@media (max-width: 480px) {

	/* responsive design section*/
	#responsive_design li:nth-child(1) {
		width: 30%;
	}

	#responsive_design li:nth-child(2) {
		width: 25%;
	}

	#responsive_design li:nth-child(3) {
		width: 18%;
	}

	#responsive_design li:nth-child(4) {
		width: 10%;
	}

	#responsive_design h2 {
		margin-bottom: 50px;
	}

	#parallax1, #parallax4 {
		height: auto;
		padding: 100px 0;
	}

	#parallax1 h2 {
		color: #FFFFFF;
		font-weight: 300;
		line-height: 1.5em;
		padding: 0 30px 30px;
		position: relative;
	}

	#parallax3, #parallax4 {
		height: auto;
		padding: 100px 0 50px;
	}

	#parallax3 h1, #parallax4 h1 {
		padding-top: 0;
	}

	#parallax2 h1 {
		line-height: 32px;
	}

	#parallax2 p {
		padding-bottom: 10px;
	}

	.team_skills .span3 {
		float: none;
		width: 100%;
	}

	.team_skills .span3:nth-child(2n+0) {
		margin-left: 0;
	}

	.service_box_wrap .span3 {
		float: none;
		width: 100%;
	}

	.service_box_wrap .span3:nth-child(2n+0) {
		margin-left: 0;
	}

	#iphone {
		position: relative;
		width: 100%;
	}

	/* portfolio*/
	.portfolio-grid ul li.col8 {
		max-width: 100% !important;
	}

	/*News*/
	.custom_carousel {
		display: none;
	}

	.social_link {
		min-height: 70px;
	}

	.soc {
		width: 30px;
	}

	.copyright {
		font-size: 12px;
		margin-right: 10px;
		text-align: right;
	}

	/*portfolio*/
	.filter li a {
		font-size: 12px;
		padding: 4px 6px 6px 6px;
	}

	.portfolio-grid ul li {
		max-width: 100%;
		text-align: center;
	}

	.project_details p {
		display: none;
	}
	#contact  .span3 {
		width: 100%;
		float: none;
	}
	#responsive_design{
		min-height: 420px;
	}
	.banner-header{top:25%;}

}

@media (max-width: 401px){
	#signin{display:none!important;}


}

@media (max-width: 360px){
	.banner-buttons{margin-top:30px;}
	.banner-button{display:inline-block;}
	.banner-button:first-child{margin-right:15px;}
	.banner-button > a{display:block;border:1px solid #FFF;padding:5px;}
	.banner-button > a > span{color:#FFF;font-size:18px;display:inline-block;padding:3px;font-family:aleolight;vertical-align: middle;font-weight:100;}
	.banner-button > a > span.entypo{font-size:30px;}
	.banner-button > a > span:first-child{padding:5px 10px 5px 10px;}
}

@media (max-width: 320px) {
	.container {
		padding-left: 10px;
		padding-right: 10px;
	}

	.responsive_design {
		padding: 70px 0;
	}

	#responsive_design .content {
		top: 20px
	}

	#responsive_design li:nth-child(1) {
		width: 50%;
	}

	#responsive_design li:nth-child(2) {
		width: 40%;
	}

	#responsive_design li:nth-child(3) {
		width: 40%;
	}

	#responsive_design li:nth-child(4) {
		width: 20%;
	}

	#parallax3, #parallax4 {
		height: auto;
		padding: 50px 0;
	}

	#parallax4 h1 {
		color: #FFFFFF;
		font-size: 38px;
		font-weight: 300;
		line-height: 45px;
	}

	#parallax5 h1 {
		position: relative;
		font-size: 38px;
		padding-top: 86px;
		font-weight: 300;
		color: #fff;
		line-height: 45px;
		margin-bottom: 50px;
		text-align: left;
	}

	#parallax5 h3 {
		font-size: 20px;
		color: #fff;
		line-height: 20px;
		margin-bottom: 35px;
	}

	.portfolio-grid ul li {
		max-width: 100%;
	}

	.social_link li {
		display: inline-block;
		text-align: center;
		margin: 2px;
	}

	#list-clients{
		height: auto;
	}

	/*button*/
	.btn {
		padding: 5px 8px;
		font-size: 12px;
	}

	.foot_logo {
		margin-left: -40px;
	}

	.foot_logo a {
		font-size: 30px;
	}

	.copyright {
		margin: 0 5px 0 0;
		padding: 0;
	}
	#responsive_design{
		min-height: 360px;
	}

}

@media (max-width: 260px){
	.banner-buttons{margin-top:50px;}
	.banner-button{display:block;padding:5px;margin:0 auto;width:100%;box-sizing:border-box;}
	.banner-button:first-child{margin-right:30px;}
	.banner-button > a{display:block;border:1px solid #FFF;padding:5px;}
	.banner-button > a > span{color:#FFF;font-size:20px;display:inline-block;padding:5px;font-family:aleolight;vertical-align: middle;font-weight:100;}
	.banner-button > a > span.entypo{font-size:40px;}
	.banner-button > a > span:first-child{padding:5px 10px 5px 30px;}
}
@media (max-width: 240px) {
	#home {
		padding-top: 48px;
	}

}

/* hack Chrome / Safari */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
	.header, .header-register, #responsive_design, #parallax1, #parallax1-register, #parallax2, #parallax2-register, #parallax3, #parallax3-register, #parallax4, #parallax5, #newsletter {
		background-attachment: scroll;
	}
}

/*** Custom **/
.header-register input,
#portfolio input,
#blog input,
.header-register select,
#portfolio select,
#blog select {
	width: 100%;
	box-sizing: border-box;
	height: 30px;
}

.exposant{
	font-size: 10px;
	vertical-align: super;
}

.banner-header .animated .exposant{
	color: #FFFFFF;
	font-size: 20px;
}

.header .logo{
	height: 60px;
	width: 215px;
}

html {
	height: 100%;

}

html body {
	height: 100%;
}
html body .header {
	height: 100%;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

html body .header .banner {
	height: 100%;
}


.textboxex
{
border:2px solid #219ed0 !important;
width:94% !important;
padding-left:20px !important;
border-radius:5px !important;
}

.textboxex:focus
{
box-shadow:0px 0px 15px #CCCCCC inset !important;
}