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, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video{border:0 none;margin:0;outline:0 none;padding:0;vertical-align:baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block;}
*,
*,
*:after,
*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0;margin:0;}
input::-moz-focus-inner{border:0;}
a{text-decoration:none;color:#444;}
a:hover, a:active, a:focus{outline:0;color:#ff0000;}
button::-moz-focus-inner{border:0;}
img{display:block;height:auto;max-width:100%;border:0 none;outline:0;}
ul{list-style-type:none;}
li{list-style-type:none;}
.center{text-align:center;}
.clear{clear:both;}
#wrapper, #start-wrapper{width:100%;margin:0 auto;}
body{font-size:16px;font-family:'Open Sans', Arial, Helvetica, Verdana, sans-serif;background-color:#fff;margin:0 auto;color:#000;height:auto;line-height:23px;}

/*--START SCREEN--*/
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in {
opacity:0;
-webkit-animation:fadeIn ease-in 1; 
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;

-webkit-animation-fill-mode:forwards;  
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;

-webkit-animation-duration:0.3s;
-moz-animation-duration:0.3s;
animation-duration:0.3s;

-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.splash {
background: url('http://progressive-retail.com/img/start-screen.jpg') center center;
background-size: cover;
background-attachment: fixed;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
min-height: 360px;
z-index: 999;
text-align: center;
}
.splash-title {
-webkit-animation-delay: 1.0s;
-moz-animation-delay: 1.0s;
animation-delay: 1.0s;
}
.splash-slogan{
width:100%;
float:right;
margin:25% 21% 0 0;
text-align:right;
text-transform:uppercase;
font-weight:700;
text-shadow: 0 2px 10px #000;
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
animation-delay: 1.5s;
}
/*
#start-screen {
background: url('../img/start-screen.jpg') no-repeat 50% 50% fixed; 
background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
}*/
#start-logo{
float:right;
margin:50px 7% 0;
}

#start-logo img{
width:300px;
}
/*#start-title{
width:100%;
float:right;
margin:30% 21% 0 0;
text-align:right;
text-transform:uppercase;
font-weight:700;
}*/
.slogan {
color:#fff;
text-shadow:0 2px 10px #777;
font-size:1.5em;
}
.slogan .red{
margin-left:3px;
color:#ff0000;
}
.start-link{
margin-top:2em;
}
.start-link a{
background:#444;
color:#f8f8f8;
padding:10px 20px;
font-size:1.1em;
-webkit-transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
-moz-transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
.start-link a:hover{
background:#ededed;
color:#ff0000;
}
/*--------
MAIN PAGES
---------*/
#main-screen{
background: url('../img/mapSofia.jpg') no-repeat 50% 50% fixed; 
background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
}
/*-----
HEADER
-----*/
header {
margin-top:150px;
}
#main-logo{
width:20%;
float:left;
position:relative;
bottom:30px;
}
#main-logo img{
width:200px;
}
/*------------
LANGUAGE MENU
------------*/
.lang-menu{
float:right;
width:10%;
margin-top:40px;
padding: 0 15px;
text-align:right;
}
.lang-menu li{
display:inline-block;
vertical-align: middle;
margin:10px 0 0 3px;
}
.lang-menu li img{
width:36px;
height:24px;
opacity:1;
}
.lang-menu li img:hover{
opacity:0.7;
}
/*--Language Hover Fliping Effect--*/
.lang-menu li a {
width: 36px;
height: 24px;
float: left;
-webkit-perspective: 600px;
-moz-perspective: 600px;
-ms-perspective: 600px;
perspective: 600px;
}
.lang-menu li .front {
text-align: center;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);
-ms-transform: rotateX(0deg) rotateY(0deg);
-o-transform: rotateX(0deg) rotateY(0deg);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.lang-menu li:hover .front {
-webkit-transform: rotateX(0deg) rotateY(180deg);
-moz-transform: rotateX(0deg) rotateY(180deg);
-ms-transform: rotateX(0deg) rotateY(180deg);
-o-transform: rotateX(0deg) rotateY(180deg);
}
.lang-menu li .back {
position: absolute;
top: 0;
width: inherit;
height: inherit;
text-align: center;
text-transform:uppercase;
color:#fff;
background:#253777;
z-index: -1;
-webkit-transform: rotateX(0deg) rotateY(-180deg);
-moz-transform: rotateX(0deg) rotateY(-180deg);
-ms-transform: rotateX(0deg) rotateY(-180deg);
-o-transform: rotateX(0deg) rotateY(-180deg);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.lang-menu li:first-child .back{
background:#529F89;
}
.lang-menu li:hover .back {
z-index: 1;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);
-ms-transform: rotateX(0deg) rotateY(0deg);
-o-transform: rotateX(0deg) rotateY(0deg);
}
/*-------
MAIN MENU
--------*/
/* Dropdown Whirling Effect */
#main-menu .menu {
height: 40px;
margin-top:40px;
width:70%;
float:left;
}
#main-menu .menu li {
background: #ccc;
min-width:16.66%;
}
#main-menu .menu > li {
display: block;
float: left;
position: relative;
}
#main-menu .menu a {
color: #333;
display: block;
line-height: 45px;
padding: 0 25px;
text-align:center;
text-transform: uppercase;
-webkit-transition:color 0.3s ease, background-color 0.3s ease;
-moz-transition:color 0.3s ease, background-color 0.3s ease;
-ms-transition:color 0.3s ease, background-color 0.3s ease;
-o-transition:color 0.3s ease, background-color 0.3s ease;
transition:color 0.3s ease, background-color 0.3s ease;
}
#main-menu .menu li:hover > a {
color: #fff;
background: #1c1c1c;
}
/* SUBMENU */
#main-menu .submenu {
width:100%;
left: 0;
max-height: 0;
position: absolute;
top: 100%;
z-index: 0;
-webkit-perspective: 400px;
-moz-perspective: 400px;
-ms-perspective: 400px;
-o-perspective: 400px;
perspective: 400px;
}
#main-menu .submenu li {
opacity: 0;
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
-webkit-transition: opacity .4s, -webkit-transform .5s;
-moz-transition: opacity .4s, -moz-transform .5s;
-ms-transition: opacity .4s, -ms-transform .5s;
-o-transition: opacity .4s, -o-transform .5s;
transition: opacity .4s, transform .5s;
}
#main-menu .menu .submenu li:hover a {
color: #ffffff;
}
#main-menu .menu > li:hover .submenu, .menu > li:focus .submenu {
max-height: 2000px;
z-index: 10;
}
#main-menu .menu > li:hover .submenu li, .menu > li:focus .submenu li {
opacity: 1;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
/* CSS3 delays for transition effects */
.menu li:hover .submenu li:nth-child(1) {
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-ms-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
.menu li:hover .submenu li:nth-child(2) {
-webkit-transition-delay: 50ms;
-moz-transition-delay: 50ms;
-ms-transition-delay: 50ms;
-o-transition-delay: 50ms;
transition-delay: 50ms;
}
.menu li:hover .submenu li:nth-child(3) {
-webkit-transition-delay: 100ms;
-moz-transition-delay: 100ms;
-ms-transition-delay: 100ms;
-o-transition-delay: 100ms;
transition-delay: 100ms;
}
.menu li:hover .submenu li:nth-child(4) {
-webkit-transition-delay: 150ms;
-moz-transition-delay: 150ms;
-ms-transition-delay: 150ms;
-o-transition-delay: 150ms;
transition-delay: 150ms;
}
.menu li:hover .submenu li:nth-child(5) {
-webkit-transition-delay: 200ms;
-moz-transition-delay: 200ms;
-ms-transition-delay: 200ms;
-o-transition-delay: 200ms;
transition-delay: 200ms;
}
.menu li:hover .submenu li:nth-child(6) {
-webkit-transition-delay: 250ms;
-moz-transition-delay: 250ms;
-ms-transition-delay: 250ms;
-o-transition-delay: 250ms;
transition-delay: 250ms;
}
.menu li:hover .submenu li:nth-child(7) {
-webkit-transition-delay: 300ms;
-moz-transition-delay: 300ms;
-ms-transition-delay: 300ms;
-o-transition-delay: 300ms;
transition-delay: 300ms;
}
.menu li:hover .submenu li:nth-child(8) {
-webkit-transition-delay: 350ms;
-moz-transition-delay: 350ms;
-ms-transition-delay: 350ms;
-o-transition-delay: 350ms;
transition-delay: 350ms;
}
/* START THE PIANO EFFECT **/
.submenu li:nth-child(1) {
-webkit-transition-delay: 350ms;
-moz-transition-delay: 350ms;
-ms-transition-delay: 350ms;
-o-transition-delay: 350ms;
transition-delay: 350ms;
}
.submenu li:nth-child(2) {
-webkit-transition-delay: 300ms;
-moz-transition-delay: 300ms;
-ms-transition-delay: 300ms;
-o-transition-delay: 300ms;
transition-delay: 300ms;
}
.submenu li:nth-child(3) {
-webkit-transition-delay: 250ms;
-moz-transition-delay: 250ms;
-ms-transition-delay: 250ms;
-o-transition-delay: 250ms;
transition-delay: 250ms;
}
.submenu li:nth-child(4) {
-webkit-transition-delay: 200ms;
-moz-transition-delay: 200ms;
-ms-transition-delay: 200ms;
-o-transition-delay: 200ms;
transition-delay: 200ms;
}
.submenu li:nth-child(5) {
-webkit-transition-delay: 150ms;
-moz-transition-delay: 150ms;
-ms-transition-delay: 150ms;
-o-transition-delay: 150ms;
transition-delay: 150ms;
}
.submenu li:nth-child(6) {
-webkit-transition-delay: 100ms;
-moz-transition-delay: 100ms;
-ms-transition-delay: 100ms;
-o-transition-delay: 100ms;
transition-delay: 100ms;
}
.submenu li:nth-child(7) {
-webkit-transition-delay: 50ms;
-moz-transition-delay: 50ms;
-ms-transition-delay: 50ms;
-o-transition-delay: 50ms;
transition-delay: 50ms;
}
.submenu li:nth-child(8) {
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-ms-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}

/* Mobile Menu Styling */
a.mobilemenu-reveal {
display: none;
}
.mobile-container .mobile-bar {
float: left;
width: 100%;
position: relative;
background: #0c1923;
padding: 4px 0;
min-height: 42px;
top:3em;
z-index: 999999;
}
.mobile-container a.mobilemenu-reveal {
width: 32px;
height: 32px;
padding: 10px 1% 10px 98%;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
color: #fff;
text-decoration: none;
font-size: 16px;
text-indent: -9999em;
line-height: 22px;
font-size: 1px;
display: block;
font-family: Arial, Helvetica, sans-serif;
font-weight: 700;
}
.mobile-container a.mobilemenu-reveal span {
display: block;
background: #fff;
height: 3px;
margin-top: 5px;
}
.mobile-container .mobile-nav {
float: left;
width: 100%;
background: #0c1923;
margin-top: 44px;
}
.mobile-container .mobile-nav ul {
padding: 0;
margin: 0;
width: 100%;
list-style-type: none;
}
.mobile-container .mobile-nav ul li {
position: relative;
float: left;
width: 100%;
}
.mobile-container .mobile-nav ul li a {
display: block;
float: left;
width: 90%;
padding: 1em 5%;
margin: 0;
text-align: left;
color: #fff;
border-top: 1px solid #383838;
border-top: 1px solid rgba(255,255,255,0.5);
text-decoration: none;
text-transform: uppercase;
}
.mobile-container .mobile-nav ul li li a {
width: 80%;
padding: 1em 10%;
border-top: 1px solid #f1f1f1;
border-top: 1px solid rgba(255,255,255,0.25);
opacity: 0.75;
filter: alpha(opacity=75);
text-shadow: none !important;
visibility: visible;
}
.mobile-container .mobile-nav ul li.mobile-last a {
border-bottom: none;
margin-bottom: 0;
}
.mobile-container .mobile-nav ul li li li a {
width: 70%;
padding: 1em 15%;
}
.mobile-container .mobile-nav ul li li li li a {
width: 60%;
padding: 1em 20%;
}
.mobile-container .mobile-nav ul li li li li li a {
width: 50%;
padding: 1em 25%;
}
.mobile-container .mobile-nav ul li a:hover {
background: #252525;
background: rgba(255,255,255,0.1);
}
.mobile-container .mobile-nav ul li a.mobile-expand {
margin-top: 1px;
width: 26px;
height: 32px;
padding: 12px !important;
text-align: center;
position: absolute;
right: 0;
top: 0;
z-index: 2;
font-weight: 700;
background: rgba(255,255,255,0.1);
border: none !important;
border-left: 1px solid rgba(255,255,255,0.4) !important;
border-bottom: 1px solid rgba(255,255,255,0.2) !important;
}
.mobile-container .mobile-nav ul li a.mobile-expand:hover {
background: rgba(0,0,0,0.9);
}
.mobile-container .mobile-push {
float: left;
width: 100%;
padding: 0;
margin: 0;
clear: both;
}
.mobile-nav .wrapper {
width: 100%;
padding: 0;
margin: 0;
}
.mobile-container .mobile-bar, .mobile-container .mobile-bar * {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.mobile-remove {
display: none !important;
}
/*----------
MAIN CONTENT
-----------*/
#main-content, #main-content .content-text, #clients, #contact {
background-color:#fff;
opacity:1;
}
/*#main-content:hover, #main-clients:hover, #main-projects:hover, #main-content .content-text:hover, #contact:hover {
opacity:0.8;
}*/
#main-content, #clients, #projects, #contact{
display:block;
width:70%;
min-height:350px;
margin:5px 0 0 20%;
padding:0 0 25px;
font-size:16px;
}
#main-content h1, #contact h1{
padding:2em 0 0 2em;
text-align:left;
}
#main-content .content-text {
float:left;
margin:0 auto;
padding:2em 3em 3em;
text-align:justify;
}
#main-content .content-text img {
float:left;
padding-right:15px;
}
/*-----
CLIENTS
------*/
#clients{
min-height:750px;
}
#clients h1{
padding:50px 0 0 45px;
text-align:center;
color:#333;
}
#clients-content{
content:block;
margin:50px auto;
text-align: center;
}
/*- FILTER OPTIONS -*/
.ca-menu{
width: 100%;
height: auto;
margin: 50px auto;
overflow: hidden;
}
.ca-menu li{
display:inline-block;
background: #fff;
width: 150px;
height: 120px;
border:1px solid #ddd;
overflow: hidden;
position: relative;
margin-right: 4px;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.ca-menu li:last-child{
margin-right: 0px;
}
.ca-menu li a{
text-align: left;
width: 100%;
height: 100%;
display: block;
color: #555;
position: relative;
}
.ca-icon{
color: #555;
text-shadow: 1px 0px 1px rgba(255,255,255,0.8);
line-height: 100px;
position: absolute;
width: 100%;
height: 50%;
left: 0px;
top: 0px;
text-align: center;
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
-o-transition: all 200ms linear;
-ms-transition: all 200ms linear;
transition: all 200ms linear;
}
.ca-content{
position: absolute;
left: 0px;
width: 100%;
height: 50%;
top: 65%;
}
.ca-main{
font-size: 16px;
opacity: 0.8;
text-align: center;
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
-o-transition: all 200ms linear;
-ms-transition: all 200ms linear;
transition: all 200ms linear;
}
.ca-menu li:hover{
background:#fff;
color:#000;
border:none;
}
.ca-menu li:hover .ca-icon{
color: #777;
-webkit-animation: moveFromLeft 400ms ease;
-moz-animation: moveFromLeft 400ms ease;
-ms-animation: moveFromLeft 400ms ease;
}
.ca-menu li:hover .ca-main{
color: #333;
-webkit-animation: moveFromRight 300ms ease;
-moz-animation: moveFromRight 300ms ease;
-ms-animation: moveFromRight 300ms ease;
}
@-webkit-keyframes moveFromLeft{
from {-webkit-transform: translateX(-100%);}
to {-webkit-transform: translateX(0%);}}
@-moz-keyframes moveFromLeft{
from {-moz-transform: translateX(-100%);}
to {-moz-transform: translateX(0%);}}
@-ms-keyframes moveFromLeft{
from {-ms-transform: translateX(-100%);}
to {-ms-transform: translateX(0%);}}
@-webkit-keyframes moveFromRight {
from {-webkit-transform: translateX(100%);}
to {-webkit-transform: translateX(0%);}}
@-moz-keyframes moveFromRight {
from {-moz-transform: translateX(100%);}
to {-moz-transform: translateX(0%);}}
@-ms-keyframes moveFromRight {
from {-ms-transform: translateX(100%);}
to {-ms-transform: translateX(0%);}}
@-webkit-keyframes moveFromBottom {
from {-webkit-transform: translateY(100%);}
to {-webkit-transform: translateY(0%);}}
@-moz-keyframes moveFromBottom {
from {-moz-transform: translateY(100%);}
to {-moz-transform: translateY(0%);}}
@-ms-keyframes moveFromBottom {
from {-ms-transform: translateY(100%);}
to {-ms-transform: translateY(0%);}}

/*- Clients List -*/
.clientsList {
width: 85%;
height: auto;
overflow: hidden;
margin:0 auto;
}
.clientsList li a img {
margin:0 auto;
}
.clientsList li.item {
width: 20%;
height: 200px;
display: inline-block;
text-align: center;
overflow: hidden;
}
.clientsList .item span { 
display:block;
position:relative;
top:40%;
font-size: 16px; 
line-height: 20px;
text-transform:uppercase;
}
.clientsList li a {
width: 100px;
height: 100px;
float: left;
margin: 0 10px;
-webkit-perspective: 600px;
-moz-perspective: 600px;
-ms-perspective: 600px;
perspective: 600px;
}
.clientsList li .front {
text-align: center;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);
-ms-transform: rotateX(0deg) rotateY(0deg);
-o-transform: rotateX(0deg) rotateY(0deg);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.clientsList li:hover .front {
-webkit-transform: rotateX(0deg) rotateY(180deg);
-moz-transform: rotateX(0deg) rotateY(180deg);
-ms-transform: rotateX(0deg) rotateY(180deg);
-o-transform: rotateX(0deg) rotateY(180deg);
}
.clientsList li .back {
position: absolute;
top: 0;
width: inherit;
height: inherit;
text-align: center;
z-index: -1;
-webkit-transform: rotateX(0deg) rotateY(-180deg);
-moz-transform: rotateX(0deg) rotateY(-180deg);
-ms-transform: rotateX(0deg) rotateY(-180deg);
-o-transform: rotateX(0deg) rotateY(-180deg);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}

.clientsList li:hover .back {
color:#333;
z-index: 1;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);
-ms-transform: rotateX(0deg) rotateY(0deg);
-o-transform: rotateX(0deg) rotateY(0deg);
}
/*-------
PROJECTS
-------*/
#projects h1{
padding:2em 0 0;
text-align:center;
color:#333;
background:#f8f8f8;
}
.gallery-projects{
background:#f8f8f8;
width:100%;
padding: 3em;
text-align: center;
margin:0 auto;
}
.gallery-projects li {
width:24%;
height:100%;
min-height: 100%;
text-align: center;
height: auto;
position: relative;
margin: 0.5%;
display: inline-block;
overflow: hidden;
background-color: black;
}
.gallery-projects li .name {
text-decoration: none;
text-transform: uppercase;
text-shadow: rgba(0, 0, 0, 0.7) 1px 1px 5px;
color: #fff;
font-weight: lighter;
font-size: 21px;
position: absolute;
display: block;
top: 40%;
left: 0;
text-align: center;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
z-index: 2;
width: 100%;
height: 100%;
}
.gallery-projects li:hover .name {
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
-moz-transition-property: all;
-o-transition-property: all;
-webkit-transition-property: all;
transition-property: all;
-moz-transition-duration: 0.6s;
-o-transition-duration: 0.6s;
-webkit-transition-duration: 0.6s;
transition-duration: 0.6s;
}
.gallery-projects li:hover img {
-moz-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
-webkit-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
background-position: top top;
-webkit-filter: grayscale(0.4) blur(2px);
filter: grayscale(0.4) blur(2px);
-moz-transition-property: all;
-o-transition-property: all;
-webkit-transition-property: all;
transition-property: all;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
-webkit-transition-duration: 0.8s;
transition-duration: 0.8s;
}
.gallery-projects li:hover:hover img {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
opacity: 0.5;
}
.gallery-projects li img {
display: block;
width: 350px;
height:100%;
margin: 0;
float: left;
text-align: center;
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
-moz-transition-property: all;
-o-transition-property: all;
-webkit-transition-property: all;
transition-property: all;
-moz-transition-duration: 0.4s;
-o-transition-duration: 0.4s;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
/*------
CONTACTS
-------*/
#contact{
background-color:#fff;
margin-top:15px;
padding-bottom:50px;
}
#contact h1{
font-size:21px;
font-weight:400;
margin-top:0;
line-height:30px;
text-align:center;
padding:15px;
}
.contact-form {
margin-top: -38px;
margin: 0 auto;
max-width: 992px;
}
.contact-form .pad {
padding: 0 20px;
width:75%;
margin:0 auto;
}
.plant {
color: #fff;
display: none;
padding: 140px 0 0;
position: absolute;
top: 0;
width: 100%;
}
.contact-form .grid .boxxy {
padding: 10px;
}
.g-1-2 {
width:46.70%;
margin-left:15px;
}
.g-3, .g-4{
width:95.9%;
margin:0 auto;
}
.g-1, .g-1-2, .g-1-3, .g-2-3, .g-1-4, .g-3-4 {
display: inline-block;
letter-spacing: normal;
text-rendering: auto;
vertical-align: top;
word-spacing: normal;
}
.contact-form .grid #subject, .contact-form .grid #math {
height: 50px;
resize: none;
}
.contact-form .grid #message {
height: 140px;
resize: none;
overflow:auto;
}
.contact-form .grid input,
.contact-form .grid textarea{
border: 1px solid #ddd;
font-size: 17px;
padding: 10px 0 10px 20px;
width: 100%;
}
.contact-form .grid input:focus,
.contact-form .grid textarea:focus{
border: 1px solid #4ba93c;
outline: none;
color:#347574;
}
.contact-form .grid .error {
border: 1px solid #e22d2d;
}
button, input {
line-height: normal;
}
button, input, select, textarea {
font-family: inherit;
font-size: 100%;
margin: 0;
}
.contact-form .grid #message {
overflow: auto;
vertical-align: top;
}
.submit {
display:inline-block;
height:50px;
width:93%;
background-color:#ccc;
color:#444;
font-size:17px;
font-weight:400;
margin:25px 0 0 25px;
position:relative;
text-transform:uppercase;
-webkit-transition:a 0.3s ease, background-color 0.3s ease;
-moz-transition:color 0.3s ease, background-color 0.3s ease;
-ms-transition:color 0.3s ease, background-color 0.3s ease;
-o-transition:color 0.3s ease, background-color 0.3s ease;
transition:color 0.3s ease, background-color 0.3s ease;
z-index:20;cursor:pointer;
bottom:15px;
border:0 none;
}
.submit:hover, .submit:active {
background-color:#333;
color:#f8f8f8;
}
#contact .success-message{
color: #90c843;
padding: 40px 0 0;
text-align: center;
text-transform: uppercase;
font-size:18px;
font-weight:700;
letter-spacing:1px;
}
/*-----
FOOTER
------*/
footer {
width:90%;
color: #375737;
font-size:13px;
font-style: italic;
margin: 25px 5px 10px;
text-align: right;
}
footer a {
color: #375737;
}
footer a:hover{
color: #74AD17;
}
/*----------------
RESPONSIVE DESIGN
-----------------*/
@media only screen and (max-device-width: 1366px) {
#start-title{
margin:27% 18% 0 0;
}
header {
margin-top:50px;
}
.gallery-projects li .name {
font-size: 1em;
}
}
@media screen and (max-width:1280px){
#main-menu .menu a{
padding:0 10px;
}
}
@media screen and (max-width:1200px){
#start-title{
margin:25% 17% 0 0;
}
header {
margin-top: 1em;
}
#main-logo {
padding: 0 10% 0 5%;
width: 30%;
bottom:0;
}
#main-menu .menu {
margin: 40px auto;
width: 100%;
}
.lang-menu {
margin-top: 1em;
position: absolute;
right: 10px;
width: 45%;
}
.submit{
margin:25px 0 0 3.5%;
width:92.5%;
}
}
@media only screen and (max-width:1024px){
#start-title{
margin:30% 15% 0 0;
}
.g-1-2{
margin-left:10px;
}
.clientsList li.item {
width: 150px;
}
}
@media screen and (max-width:800px){
#start-title{
margin:100px 10px 0 0;
}
#start-logo{
background:rgba(255, 255, 255, 0.3);
margin:100px 10px 0 0;
}
#start-logo img{
width:200px;
}
#main-logo {
bottom: 70px;
position: relative;
}
#main-logo img{
width:200px;
height:auto;
}
.lang-menu{
margin-top: 0;
position: absolute;
right: 10px;
top: 10px;
width: 45%;
}
#main-content, #clients, #projects, #contact{
width:100%;
margin:0 auto;
}
#clients h1 {
padding: 2em 0 0;
}
.gallery-projects{
padding:3em 1em;
}
.gallery-projects li {
margin: 0.5% 1%;
width: 48%;
}
.contact-form .pad{
width:100%;
}
}
@media screen and (max-width:600px){
.g-1-2{
width:96.7%;
}
#start-title{
margin:250px 5% 0 0;
}
#main-logo {
margin-bottom: -1em;
width: 100%;
position: absolute;
left: 0;
top: 0;
}
#main-logo img{
width:100px;
}
}
@media screen and (max-width:420px){
#start-logo{
margin:50px 10px 0 0;
}
}
@media screen and (max-width:375px){
.clientsList li.item {
margin: 0 0 0 5%;
width: 40%;
}
.gallery-projects li{
width:95%;
}
}
@media screen and (max-width:320px){
#start-title{
margin:250px 5% 0 0;
}
.slogan {
font-size: 1em;
}
.start-link {
margin-top: 1em;
}
.clientsList li.item {
margin: 0;
width: 50%;
}
}