/*
Theme Name: colorful2
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: colorful2
Tags:

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

colorful2 is based on Underscores http://underscores.me/, (C) 2012-2015 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
*/

@import url(https://fonts.googleapis.com/css?family=Work+Sans:500,600,700);

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u,i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
border:0 none;
font-family:inherit;
font-size-adjust:inherit;
font-stretch:inherit;
font-style:inherit;
font-variant:inherit;
font-weight:inherit;
line-height:inherit;
margin:0;
padding:0;
}


body {
width: 100%;
height: 100%;
font-family: 'Work Sans', sans-serif;
}

html {
width: 100%;
height: 100%;
}

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

p {
padding:20px 0;
}

ol, ul {
list-style:none outside none;
}
/*
h1, h2, h3, h4, h5, h6 {
letter-spacing:1px;
}*/

h1 {
font-size:28px;
/*text-transform: uppercase;
letter-spacing:12px;*/
font-family: 'Work Sans', sans-serif;
margin-bottom:100px;
}
input::-webkit-input-placeholder {color:#4C3351;}
textarea::-webkit-input-placeholder {color:#4C3351;}

/* HOME */
.overlay-bg {
background:#9ed4d6;
bottom:0;
left:0;
opacity:0.95;
position:absolute;
right:0;
top:0;
transform:translate3d(0px, 0px, 0px);
transition:all 0.3s ease-in-out 0s;
z-index:-1;
}

/* Navigation */
.navbar {
font-size:18px;
font-weight:600;
letter-spacing:1px;
/*background-color: #9ed4d6;*/
}
.navbar-custom a {
color:#fff;
transition: all 0.3s ease-in 0s;
-webkit-transition: all 0.3s ease-in 0s;
}
.navbar-custom .nav li a:hover,
.navbar-custom .nav li a:focus,
.navbar-custom .nav li.active {
outline: 0;
color: rgba(255,255,255,.5);//#c7a339;
transition: all 0.3s ease-in 0s;
-webkit-transition: all 0.3s ease-in 0s;
background-color: transparent;
}

.top-nav-collapse:active {
transition: all 0.3s ease-in 0s;
-webkit-transition: all 0.3s ease-in 0s;
/*background-color: #333;*/
}


.navbar-nav > li > a {
/*padding-bottom:22px;
padding-top:22px;*/
}
.top-nav-collapse {
padding:0;
background-color: #9ed4d6;
border-bottom: thin solid rgba(255, 255, 255, .3);
}
.navbar-custom.top-nav-collapse 
{
border-bottom:#4C3351;
}

/* Slider */
.carousel-caption {
color: #FFFFFF;
left:15%;
padding-bottom: 20px;
padding-top: 20px;
position: absolute;
right: 15%;
bottom:45%;
text-align: center;
z-index: 10;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.carousel-caption h1 {
font-family: 'Work Sans', sans-serif;
font-size:35px;
font-weight:600;
letter-spacing:1px;
color:rgba(255, 255, 255, 0.9);
margin-bottom:0;
}
.carousel-caption h2 {
margin-top:7px;
font-size:12px;
font-weight:600;
letter-spacing:3px;
color: #c7a339;
}

.carousel-indicators {
bottom:50px;
}
.carousel-indicators li {
background-color: rgba(0, 0, 0, 0);
border: 2px solid #c7a339;
border-radius: 10px;
height: 16px;
margin: 2px;
width: 16px;
}
.carousel-indicators .active {
background-color: #c7a339;
height: 18px;
margin: 1px;
width: 18px;
}
.carousel-control .glyphicons-chevron-left,
.carousel-control .glyphicons-chevron-right,
.carousel-control .icon-prev,
.carousel-control .icon-next {
font-size:35px;
}

.carousel-control:hover, .carousel-control:focus {
color: #c7a339;
}


/* ABOUT */

.about-info {
max-width:600px;
margin:0 auto 0;
line-height:24px;
font-size:18px;
text-align:left;
}

/* SERVICES */

.services-info {
max-width:500px;
margin:0 auto 0 0;
line-height:24px;
font-size:21px;
text-align:left;
}

.services-img {
margin:20px 0 0 auto;
}

/* Skills */
.skills  {
color:#4C3351;
font-size:12px;
font-weight:600;
letter-spacing:3px;
}

.skills-title {
font-size:12px;
font-weight:600;
color:#4C3351;
margin:20px 0 0;
display:inline-block;
}

.number {
padding-top:95px;
font-size:33px;
font-weight:600;
color:#fff;
}

/* SERVICES */
.services-box {
border:solid 3px rgba(255, 255, 255, 0.1);
margin-bottom:30px;
transition: all 0.2s ease 0s;
-webkit-transition: all 0.2s ease 0s;
}
.services-box:hover {
border:solid 3px rgba(255, 255, 255, 0.15);
background:rgba(255, 255, 255, 0.02);
transition: all 0.2s ease 0s;
-webkit-transition: all 0.2s ease 0s;
}

.service-ico i {
text-align:center;
color:white;
}
.service-ico i {
display: inline-block;
cursor: pointer;
transition: all 0.2s ease 0s;
-webkit-transition: all 0.2s ease 0s;
}
.service-ico i:hover{
opacity:0.7;
transform: scale(0.8);
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transition: all 0.3s ease 0s;
}
.service-ico h4 {
margin:7% 0;
font-size:12px;
font-weight:600;
letter-spacing:2px;
color:#fff;
}
.service-ico p {
font-size:13px;
line-height:25px;
padding:15px;
letter-spacing:0.5px;
color:#d8c58d;
}

.service-ico i:before {
display:block;
font-size:40px;
padding:30px 0;
color: #c7a339;
width:40px;
height:40px;
}

.service-ico i:hover:before {
color: #d8c58d;
}


/* PORTFOLIO */
div.ff-container {
text-align:center;
}
.ff-container{
width:1170px;
margin:0 auto;
}
.ff-container label{
width:auto;
height:40px;
cursor:pointer;
color:#ffffff;
line-height:31px;
font-size:24px;
font-weight:600;
/*letter-spacing:1.5px;
border-top:solid 3px #fff;*/
padding:3px 7px;
margin:0 4px;
transition:all 0.5s ease 0s;
-webkit-transition:all 0.5s ease 0s;
}
.ff-container label:hover{
transition:all 0.5s ease 0s;
-webkit-transition:all 0.5s ease 0s;
color: rgba(255,255,255,.5);
}
.ff-container input.ff-selector-type-all:checked ~ label.ff-label-type-all,
.ff-container input.ff-selector-type-1:checked ~ label.ff-label-type-1,
.ff-container input.ff-selector-type-2:checked ~ label.ff-label-type-2,
.ff-container input.ff-selector-type-3:checked ~ label.ff-label-type-3,
.ff-container input.ff-selector-type-4:checked ~ label.ff-label-type-4{
color: rgba(255,255,255,.5);
/*border-top:solid 3px #4C3351;*/
padding:3px 7px;
margin:0 4px;
/*background-color:rgba(10, 26, 57, 0.8);*/
transition:all 1.5s ease 0s;
-webkit-transition:all 1.5s ease 0s;
}
.ff-container input{
display:none;
}
.ff-items{
position:relative;
margin:70px 0px 0 auto;
}
.ff-items a{
display:block;
position:relative;
margin:14px;
width:250px;
height:250px;
}
.ff-items a span{
display:block;
color:#ffffff;
font-weight:600;
font-size:13px;
/*letter-spacing:1px;*/
padding:35px;
position:absolute;
bottom:10px;
width:250px;
height:0px;
overflow:hidden;
opacity:1;
text-align:left;
}
.ff-items a:hover span{
height:18px;

}
.ff-items li img{
display:block;
}

.brdr-portfolio {
/*border:solid 3px white;*/
width:250px;
height:250px;
}

.rollover_img {
height: 0;
left: 0;
opacity: 0;
overflow: hidden;
position: absolute;
top: 0;
transition: opacity 0.5s ease 0s;
-webkit-transition: opacity 0.5s ease 0s;
}
a:hover .rollover_img {
height: auto;
opacity: 1;
}
.ff-items li{
margin:0px;
float:left;
width:292px;
height:292px;
transition:opacity 0.5s ease-in-out;
-webkit-transition:opacity 0.5s ease-in-out;
}
.ff-container input.ff-selector-type-all:checked ~ .ff-items li,
.ff-container input.ff-selector-type-1:checked ~ .ff-items .ff-item-type-1,
.ff-container input.ff-selector-type-2:checked ~ .ff-items .ff-item-type-2,
.ff-container input.ff-selector-type-3:checked ~ .ff-items .ff-item-type-3,
.ff-container input.ff-selector-type-4:checked ~ .ff-items .ff-item-type-4{
opacity: 1;
}
.ff-container input.ff-selector-type-1:checked ~ .ff-items li:not(.ff-item-type-1),
.ff-container input.ff-selector-type-2:checked ~ .ff-items li:not(.ff-item-type-2),
.ff-container input.ff-selector-type-3:checked ~ .ff-items li:not(.ff-item-type-3),
.ff-container input.ff-selector-type-4:checked ~ .ff-items li:not(.ff-item-type-4){
opacity: 0.1;
}
.ff-container input.ff-selector-type-1:checked ~ .ff-items li:not(.ff-item-type-1) span,
.ff-container input.ff-selector-type-2:checked ~ .ff-items li:not(.ff-item-type-2) span,
.ff-container input.ff-selector-type-3:checked ~ .ff-items li:not(.ff-item-type-3) span,
.ff-container input.ff-selector-type-4:checked ~ .ff-items li:not(.ff-item-type-4) span{
display:none;
}

/* Colorbox - For Embed Video and Photo */

#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/*
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:url(../img/overlay.png) repeat 0 0;}
#colorbox{outline:0;}
#cboxTopLeft{width:21px; height:21px; background:url(../img/controls.png) no-repeat -101px 0;}
#cboxTopRight{width:21px; height:21px; background:url(../img/controls.png) no-repeat -130px 0;}
#cboxBottomLeft{width:21px; height:21px; background:url(../img/controls.png) no-repeat -101px -29px;}
#cboxBottomRight{width:21px; height:21px; background:url(../img/controls.png) no-repeat -130px -29px;}
#cboxMiddleLeft{width:21px; background:url(../img/controls.png) left top repeat-y;}
#cboxMiddleRight{width:21px; background:url(../img/controls.png) right top repeat-y;}
#cboxTopCenter{height:21px; background:url(../img/border.png) 0 0 repeat-x;}
#cboxBottomCenter{height:21px; background:url(../img/border.png) 0 -29px repeat-x;}
#cboxContent{background:#fff; overflow:hidden;}
.cboxIframe{background:#fff;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{margin-bottom:28px;}
#cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
#cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
#cboxLoadingOverlay{background:url(../img/loading_background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(../img/loading.gif) no-repeat center center;}

/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }

/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

#cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
#cboxPrevious{position:absolute; bottom:0; left:0; background:url(../img/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxPrevious:hover{background-position:-75px -25px;}
#cboxNext{position:absolute; bottom:0; left:27px; background:url(../img/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxNext:hover{background-position:-50px -25px;}
#cboxClose{position:absolute; bottom:0; right:0; background:url(../img/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxClose:hover{background-position:-25px -25px;}

/*
  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
  See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}


/* PRICING */
.plan {
border:solid 3px #d8c58d;
transition: all 0.3s ease-in 0s;
-webkit-transition: all 0.3s ease-in 0s;
}
.plan:hover {
border:solid 3px #c7a339;
transition: all 0.3s ease-in 0s;
-webkit-transition: all 0.3s ease-in 0s;
}

.featured {
border:double 40px #c7a339;
}
.featured:hover {
border:double 40px #d8c58d;
}

.name-plan {
padding:50px 0 0 0;
color:#c7a339;
font-weight:600;
font-size:13px;
letter-spacing:4px;
}
.tarif-plan {
padding:5px 0 30px 0;
color:#c7a339;
font-size:70px;
font-weight:600;
}
.tarif-plan sup {
font-size:45px;
}
.options-plan {
font-size:12px;
font-weight:600;
color:#c7a339;
letter-spacing:1px;
padding:0 0 45px 0;
}
.options-plan p {
padding:12px 0;
}

.get-started {
margin-top:20px;
color:#c7a339;
border:double 4px #c7a339;
transition: all 0.3s ease-in 0s;
-webkit-transition: all 0.3s ease-in 0s;
font-size:14px;
font-weight:600;
letter-spacing:3px;
padding:15px 0;
margin-bottom:20px;
}
.get-started:hover {
background:rgba(255, 255, 255, 0.1);
color:#fff;
border:double 4px #fff;
}

/* CONTACT */

/* Contact Form */
input[type="text"], input[type="email"] {
width:100%;
height:70px;
padding:0 0 0 40px;
margin:0 0 20px;
background: #ffffff;
color:#fd989e;
border:solid 3px #fff;
font-weight:600;
font-size:14px;
letter-spacing:1px;
transition:all 0.5s ease 0s;
-webkit-transition:all 0.5s ease 0s;
}
input[type="text"]:hover, input[type="text"]:active,
input[type="email"]:hover, input[type="email"]:active {
border:solid 3px #fd989e;
transition:all 0.5s ease 0s;
-webkit-transition:all 0.5s ease 0s;
}
textarea  {
width:100%;
padding:21px 0 0 40px;
margin:0 0 20px;
height:160px;
background: #ffffff;
color:#fd989e;
border:solid 3px #fff;
font-weight:600;
font-size:14px;
letter-spacing:1px;
transition:all 0.5s ease 0s;
-webkit-transition:all 0.5s ease 0s;
}
textarea:hover, textarea:active {
border:solid 3px #fd989e;
transition:all 0.5s ease 0s;
-webkit-transition:all 0.5s ease 0s;
}
input[type="submit"] {
text-align:center;
background: #fd989e;
width:100%;
padding:0;
margin:0;
cursor:pointer;
border:0;
height:70px;
color:#ffffff;
transition:all 0.5s ease 0s;
-webkit-transition:all 0.5s ease 0s;
font-weight:600;
font-size:14px;
margin-bottom:20px;
}
input[type="submit"]:hover {
background: #ffb3b8;
/*border:solid 3px #ffffff;*/
}
/*CSS for Successfully sent notification*/
.notification_ok{
width:100%;
margin:20px auto;
padding:12px;
background:#4C3351;
color: #c7a339;
font-size:10px;
font-weight:600;
letter-spacing:1px;
text-align: center;
}

/* Contact Details */
.cont-details {
border:solid 3px #fff;
}
.adress {
padding:80px 20% 44px 30%;
font-size:14px;
font-weight:600;
letter-spacing:1px;
color:#fff;
text-align:left;
}
.adress p {
padding:10px 0 0;
}
.phone {
padding:0 20% 44px 30%;
font-size:14px;
font-weight:600;
letter-spacing:1px;
color:#fff;
text-align:left;
}
.email {
padding:0 20% 80px 30%;
font-size:14px;
font-weight:600;
letter-spacing:1px;
text-align:left;
}

.email a {
color:#fff;
transition: all 0.2s ease-in 0s;
-webkit-transition: all 0.2s ease-in 0s;
}
.email a:hover {
color:#4C3351;
transition: all 0.2s ease-in 0s;
-webkit-transition: all 0.2s ease-in 0s;
}

.fa-map-marker {
color:#4C3351;
left:20%;
top:26.4%;
position:absolute;
font-size:30px;
}
.fa-phone {
color:#4C3351;
left:20%;
top:49.5%;
position:absolute;
font-size:30px;
}
.fa-envelope-o {
color:#4C3351;
left:20%;
top:68.5%;
position:absolute;
font-size:30px;
}

/* Footer */

/* Copyright */
.copyright {
color:#4C3351;
font-size:12px;
font-weight:600;
letter-spacing:3px;
margin:70px 0 0;
}
.copyright a {
color:#fff;
-webkit-transition:all 0.3s;
-moz-transition:all 0.3s;
-o-transition:all 0.3s;
transition:all 0.3s;
}
.copyright a:hover {
color:#4C3351;
}

/* contact on bottom */
.contacts-bottom {
color:#ffffff;
font-size:21px;
text-align:center;
margin:70px 0 0;
}
.copyright a {
color:#fff;
-webkit-transition:all 0.3s;
-moz-transition:all 0.3s;
-o-transition:all 0.3s;
transition:all 0.3s;
}
.copyright a:hover {
color:#4C3351;
}

/* Social Networks */
.social-net{
margin:70px 0 0;
}

#side-portfolio .social-net{
margin:0;
}

.icon-button {
/*background-color:#333;*/
border-radius:50px;
border: 3px solid #ffffff;
cursor:pointer;
display:inline-block;
font-size:18px;
height:50px;
line-height:50px;
margin:0 7px;
position:relative;
text-align:center;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
width:50px;
}

/* Circle */
.icon-button span {
border-radius:0;
display:block;
height:0;
left:50%;
margin:0;
position:absolute;
top:50%;
-webkit-transition:all 0.3s;
-moz-transition:all 0.3s;
-o-transition:all 0.3s;
transition:all 0.3s;
width:0;
}
.icon-button:hover span {
width:50px;
height:50px;
border-radius:50px;
margin:-25px;
}
.twitter span {
background-color:#4099ff;
}
.facebook span {
background-color:#3B5998;
}
.google-plus span {
background-color:#db5a3c;
}

.pinterest span {
background-color:#cb2027;
}

/* Icons */
.icon-button i {
/*background:none;*/
color:white;
height:50px;
left:-3px;
line-height:50px;
position:absolute;
top:-3px;
-webkit-transition:all 0.3s;
-moz-transition:all 0.3s;
-o-transition:all 0.3s;
transition:all 0.3s;
width:50px;
z-index:10;
}
.icon-button .icon-twitter {
color: #4099ff;
}
.icon-button .icon-facebook {
color: #3B5998;
}
.icon-button .icon-google-plus {
color: #db5a3c;
}
.icon-button:hover .icon-twitter,
.icon-button:hover .icon-facebook,
.icon-button:hover .icon-google-plus {
color: white;
}



.carousel,
.item,
.active {
	height:100%;
}

.carousel-inner {
	height:100%;
}

.fill {
	width:100%;
	height:100vh;
	background-position: center;
	background-size: cover;
}


@media only screen and (max-width: 1200px) {

/* PORTFOLIO */
.ff-container{
width:876px;
margin:55px auto;
}

}

@media only screen and (max-width: 992px) {

/* PORTFOLIO */
.ff-container{
width:584px;
margin:55px auto;
}

}

@media(min-width:767px) {
.navbar {
padding: 20px 0;
-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
transition: background .5s ease-in-out,padding .5s ease-in-out;
}

.top-nav-collapse {
 /* Customize the look and feel of the collapsed top nav here */
padding: 0;
}
}

@media only screen and (max-width: 768px) {

/* HOME */
/* Nanvigation */
.navbar-custom {
background-color: #9ed4d6;
border-bottom: thin solid rgba(255, 255, 255, .3);
}
.navbar-toggle {
padding:9px 10px;
margin:15px;
}
.navbar-custom .navbar-toggle {
border-color: #ffffff;
transition: all 0.4s ease 0s;
-webkit-transition: all 0.4s ease 0s;
}
.navbar-custom .navbar-toggle:hover,
.navbar-custom .navbar-toggle:focus {
/*background-color: #9ed4d6;*/
}
.navbar-custom .navbar-toggle .icon-bar {
background-color: #ffffff;
}
.navbar-nav > li > a {
padding-top: 10px;
padding-bottom: 10px;
line-height: 20px;
}

a.navbar-brand img
{
  margin-top:10px;
}

.home-group-txt {
margin:170px 0 50px;
}

.home-middle-text {
font-size:25px;
}

/* PORTFOLIO */
.ff-container{
width:292px;
margin:55px auto;
}

/* Copyright */
.copyright {
text-align:center;
}

/* Social Networks */
.social-net{
text-align:center;
}

}

/** MY **/

/* SECTIONS */

.section1, .about-section {
  height: auto;
  /*padding:100px 0;*/
  text-align: center;
  display: table;
  width: 100%;
  color:#8c8774;
  /*background: #e5dec2 url("http://www.outro.it/wp-content/uploads/2016/03/grey-whale.png") no-repeat center bottom;*/
  background: #e5dec2;
}

.section1 a
{
	text-decoration: underline;
	color:#8c8774;
}

.section2, .services-section {
  height:auto;
  /*padding:100px 0;*/
  text-align:center;
  display: table;
  width:100%;
  color:#ffffff;
  /*background: #c1df9f url("http://www.outro.it/wp-content/uploads/2016/03/white-whale.png") no-repeat center bottom;*/
  background: #c1df9f;
}

.section2 a
{
	text-decoration: underline;
	color:#ffffff;
}

.section3, .portfolio-section {
  height:100%;
  /*padding:100px 0;*/
  text-align: center;
  display: table;
  width:100%;
  color:#fff;
  /*background: #e5a3a4 url("http://www.outro.it/wp-content/uploads/2016/03/white-whale.png") no-repeat center bottom;*/
  background: #e5a3a4;
}

/*
.section4, .pricing-section {
  height:100%;
  padding:100px 0;
  text-align: center;
  display: table;
  width:100%;
  color:#c7a339;
  background: #2D2981 url("http://www.outro.it/wp-content/uploads/2016/03/white-whale.png") no-repeat center bottom;
}*/

.section4, .contact-section {
  height:auto;
  /*padding:100px 0;*/
  text-align: center;
  display: table;
  width:100%;
  /*background: #b2a092 url("http://www.outro.it/wp-content/uploads/2016/03/white-whale.png") no-repeat center bottom;*/
  background: #b2a092;
  color:#fff;
}

.inner-portfolio-section {
  margin-top:90px;
  margin-bottom:100px;
}

.inner-portfolio-section a
{
	text-decoration: underline;
	color:#ffffff;
}

.section_content
{
	margin:100px 0;
}
/*
.section_content div.row
{
	vertical-align: middle;
}*/

.vertical-center {
  min-height: 100%;  /* Fallback for vh unit */
  min-height: 100vh; /* You might also want to use
                        'height' property instead.
                        
                        Note that for percentage values of
                        'height' or 'min-height' properties,
                        the 'height' of the parent element
                        should be specified explicitly.
  
                        In this case the parent of '.vertical-center'
                        is the <body> element */

  /* Make it a flex container */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; 
  
  /* Align the bootstrap's container vertically */
    -webkit-box-align : center;
  -webkit-align-items : center;
       -moz-box-align : center;
       -ms-flex-align : center;
          align-items : center;
  
  /* In legacy web browsers such as Firefox 9
     we need to specify the width of the flex container */
  width: 100%;
  
  /* Also 'margin: 0 auto' doesn't have any effect on flex items in such web browsers
     hence the bootstrap's container won't be aligned to the center anymore.
  
     Therefore, we should use the following declarations to get it centered again */
         -webkit-box-pack : center;
            -moz-box-pack : center;
            -ms-flex-pack : center;
  -webkit-justify-content : center;
          justify-content : center;
}


/* background home*/

#bg-home-outro
{
    background: url(http://www.outro.it/wp-content/uploads/2016/03/home-logo.png) no-repeat center center fixed; 
   -webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
    background-size: contain;
}

/* MISC */

article header { display: none !important; }

footer.entry-footer { display: none !important; }

nav.post-navigation { display: none !important; }

.single {
  background: #e5a3a4;
text-align:center;
}
/*.single nav { display: none !important; }*/

.ff-item-img {
  width: 250px;
  height: 250px;
}

.outro-container-portfolio
{
	line-height:18px;
	font-size:14px;
	/*text-align: justify;
	text-justify: auto;*/
	text-align:left;
	color: #ffffff;
	padding:0;
}

.outro-container-portfolio h1
{
	margin: 25px 15px;
	line-height:24px;
	
}

#content-portfolio
{
	font-size:18px;
	line-height:21px;
}

#content-portfolio p
{
	margin:0;
	padding:0;
}

.outro-container-portfolio .row
{
	max-width:800px;
	float: none;
	margin-left: auto;
	margin-right: auto;
}

.outro-inner-img
{
	margin-top:20px;	
}

#menu-menu-portfolio {
  background: #008;
  padding: 16px;
  text-align: center;
}
#menu-menu-portfolio a {
  color: #fff;
  font-weight: 600;
}

@media (min-width: 768px) 
{

  #content-portfolio
  {
	  padding-right: 0;
  }

  .outro-container-portfolio h1
  {
  	margin: 25px 0;
  }

  #side-portfolio, #side-portfolio p
  {
	margin-top: 0;
	padding-top:0;
	padding-left:0;
  }

}

#side-portfolio p
{
	padding-bottom: 10px;
	line-height:110%;
}

a.navbar-brand
{
  padding-top:5px;
}

.outro-whale-bottom
{
	margin-top: 80px;
}

/* Contact Form 7 */

div.wpcf7-validation-errors {
	border: none;
}

strong
{
	font-weight:700;
}

.wpcf7-form .ajax-loader
{
	display:none;
}

.cf7-desc-terms a
{
	color: #ffffff;
	text-decoration: underline;
}

/* footer */

#outro-footer
{
	text-align: center;
}

.outro-footer-home
{
	background: #b2a092;
}

@media (min-width: 1000px) and (min-height: 563px)
{
	
	#bg-home-outro
	{
    	background: url(http://www.outro.it/wp-content/uploads/2016/03/home-logo.png) no-repeat center center fixed;
		background-size: 1000px 563px;
	}
	
}