/*== Reset & Clearfix */
html, body
{
	height: 100%;
	margin: 0;
	padding: 0;
}

html, body, ul, ol, li, p, h1, h2, h3, h4, h5
{
	margin: 0;
	padding: 0;
	border:0;
	outline: none;
	    background-color: #bce0ee;

}

body
{
	background: #ecfabd;
	font-family: "LicensePlate";
	line-height: 22px;
	color: #3a3a3a;
}

body, .green1{
	background: #ecfabd;
}

body, .green2
{
	background: #ffffcf;
}

body, .green3
{
	background: #eee9bc;
}

body, .yellow
{
background: #bce0ee; /* Old browsers */
background: -moz-linear-gradient(top,  #bce0ee 0%, #29b8e5 47%, #bce0ee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bce0ee), color-stop(47%,#29b8e5), color-stop(100%,#bce0ee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #bce0ee 0%,#29b8e5 47%,#bce0ee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #bce0ee 0%,#29b8e5 47%,#bce0ee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #bce0ee 0%,#29b8e5 47%,#bce0ee 100%); /* IE10+ */
background: linear-gradient(to bottom,  #bce0ee 0%,#29b8e5 47%,#bce0ee 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bce0ee', endColorstr='#bce0ee',GradientType=0 ); /* IE6-9 */

background-repeat: no-repeat;
}




img
{
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	border: none;
	-ms-interpolation-mode: bicubic;

}

ul{
	font-family: 'Text Me One', sans-serif;
	text-transform: uppercase;
}

p{
	padding: 0;
	margin-top: 1em;
	margin-bottom: 15px;
}

blockquote
{
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 650px;
	font-family: 'Text Me One', sans-serif;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 3px;
}

span
{
	color: #aaaaaa;
	font-size: 13px;
}
b{ color: #36d7b7; }


h1
{
	font-size: 34px;
	word-spacing: 1px;
	line-height: 40px;
}

a { text-decoration: none; }

ol, ul
{
	list-style: none;
	margin: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
	display: block;
}

hr{
	width: 120px;
	border: none;
	height: 1px;
	background-color: #aaaaaa;
	display: block;
	border-style: inset;
	border-width: 1px;
}

iframe{
	border:0;
	margin: 0;
	overflow: hidden;
	width: 250px;
	height: 250px;
}

/* === Clearfix === */
.clearfix:after{clear:both;content:".";display:block;font-size:0;height:0;line-height:0;visibility:hidden}
.clearfix{zoom:1}


/*== General styles */

.left{ float: left; }
.right{ float: right; }


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

/*== Wrapper */

#wrapper{
	width: 980px;
	margin: 0 auto;
	position: relative;
	min-height: 695px;
}

/* === Menu section === */

#menu
{
	width: 100%;
	position: relative;
	background: transparent url("../img/menu1366x768.png") no-repeat 50% 0%;
	min-height: 695px;
	margin-bottom: 200px;
}

.about
{
	position: absolute;
	bottom:246px;
	right:118px;
}

.about a
{
	display: block;
	color: #ea7288;
	font-size: 80.93px;
}

.projects
{
	position: absolute;
	top: 284px;
	left: 189px;
}

.projects a
{
	color: #fe617b;
	font-size: 74.71px;
}

.services
{
	position: absolute;
	bottom: 319px;
	right: 262px;
}

.services a
{
	color: #cb7983;
	font-size: 84.77px;
}

.coments
{
	position: absolute;
	top:220px;
	right: 338px;
}

.coments a
{
	color: #fc5e6d;
	font-size: 53.2px;
}

.contacts
{
	position: absolute;
	top: 218px;
	left:128px;
}

.contacts a
{
	color: #faacac;
	font-size: 58.35px;
}

.following
{
	position: absolute;
	bottom:327px;
	left:81px;
}

.following a
{
	color:#ed6771;
	font-size: 55.39px;
}

.video
{
	position: absolute;
	bottom: 324px;
	right: 38px;
}

.video a
{
	color: #fc747d;
	font-size: 42.18px;
}

.social
{
	position: absolute;
	top:36px;
	right:248px;
}

.social a
{
	color: #ed8392;
	font-size: 42.5px;
}

.find
{
	position: absolute;
	bottom: 277px;
	right: 32px;
}

.find a
{
	color: #fc4258;
	font-size: 44.09px;
}

.team
{
	position: absolute;
	top: 154px;
	right: 530px;
}

.team a
{
	color: #fe617b;
	font-size: 76.88px;
}

.information
{
	position: absolute;
	top:27px;
	left: 240px;
}

.information a
{
	color: #e64e60;
	font-size: 26.1px;
}

.photos
{
	position: absolute;
	top: 87px;
	left: 426px;
}

.photos a
{
	color:#f2a2a4;
	font-size: 61.76px;
}

.works
{
	position: absolute;
	top:158px;
	right:234px;
}

.works a
{
	color: #e66a84;
	font-size: 72.32px;
}

.skills
{
	position: absolute;
	top:283px;
	right:114px;
}

.skills a
{
	color: #faacac;
	font-size: 65.1px;
}

.fonts-display
{
	font-family: 'Text Me One', sans-serif;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 3px;
}

.text
{
	padding: 30px 0 15px 0;
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 650px;
	font-family: 'Text Me One', sans-serif;
	font-weight: 300px;
	text-transform: uppercase;
	letter-spacing: 3px;
}

/* === Menu burrons in blue color === */

.blue .about a{
	color: #145b9b;
}

.blue .projects a{
	color: #588ba4;
}

.blue .services a{
	color: #00a4be;
}

.blue .coments a{
	color: #1b8eb7;
}

.blue .contacts a{
	color: #145b9b;
}

.blue .following a{
	color:#89b0c1;
}

.blue .video a{
	color: #186db9;
}

.blue .social a{
	color: #1d8db5;
}

.blue .find a{
	color: #60bae3;
}

.blue .information a{
	color: #145b9b;
}

.blue .photos a{
	color:#01aec9;
}

.blue .works a{
	color: #588ba4;
}

.blue .team a{
	color: #60bae3;
}

.blue .skills a{
	color: #60bae3;
}


/* === Menu animation styles === */

#menu a
{
	display: block;
}

#menu a:hover
{
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1);
	-webkit-transition: all .5s ease-in-out;
}

.works, .contacts, .find, .information,
.social, .photos, .comment, .services, .following
{
	-webkit-animation: rotate-lr 3s ease-in-out infinite alternate;
	-moz-animation: rotate-lr 3s ease-in-out infinite alternate;
	animation: rotate-lr 3s ease-in-out infinite alternate;
}

 .projects, .coments, .skills, .video,
 .team, .about
{
	-webkit-animation: rotate-rl 3s ease-in-out infinite alternate;
	-moz-animation: rotate-rl 3s ease-in-out infinite alternate;
	animation: rotate-rl 3s ease-in-out infinite alternate;
}

@-webkit-keyframes rotate-lr
{
    from{
        -webkit-transform:rotate(-3deg);
    }
    to{
        -webkit-transform:rotate(3deg);
    }
}

@-webkit-keyframes rotate-rl
{
    from{
        -webkit-transform:rotate(3deg);
    }
    to{
        -webkit-transform:rotate(-3deg);
    }
}

@-moz-keyframes rotate-lr
{
    from{
        -moz-transform:rotate(-3deg);
    }
    to{
        -moz-transform:rotate(3deg);
    }
}

@-moz-keyframes rotate-rl
{
    from{
        -moz-transform:rotate(3deg);
    }
    to{
        -moz-transform:rotate(-3deg);
    }
}
@keyframes rotate-lr
{
    from{
        transform:rotate(-3deg);
    }
    to{
        transform:rotate(3deg);
    }
}

@keyframes rotate-rl
{
    from{
        transform:rotate(3deg);
    }
    to{
        transform:rotate(-3deg);
    }
}


/* === ABOUT Section === */

#about
{
	width: 100%;
	text-align: center;
	padding: 40px 0 30px 0;
	position: relative;

}

#your_image
{
	padding-top: 30px;
	width: 246px;
	height: 241px;
}

.content-about
{
	width: 100%;
	position: relative;
	margin: auto;
}

.content-about .text
{
	width: 82%;

}

.about-bracket
{
	width: 9%;
	height: 200px;
	position: relative;
}

.about-bracket.left
{
	background: url("../img/bracket.png") no-repeat;
}

.about-bracket.right
{
	background: url("../img/bracket2.png") no-repeat;
}

.quote
{
	background: url("../img/quote.png") no-repeat;
	width: 150px;
	height: 150px;
	padding: 10px
}

.quote2
{
	background: url("../img/quote2.png") no-repeat;
	width: 150px;
	height: 150px;
	padding: 10px;
	position: absolute;
	top: 5px;
	right: -20px;
}

/* === Team (About) section  === */

#team
{
	padding: 30px 0;
}

.team-wrapper
{
	margin: 0 auto;
	display: inline-block;
}

.team-members
{
	float: left;
	position: relative;
	padding: 15px 30px;
	width: 250px;
}

.team-members img
{
	padding-bottom: 15px;
}

.our-team h2
{
	padding: 10px 0 0 0;
}

.our-team .text
{
	padding-bottom: 0 0 10px 0;
}

.team-social
{
	margin: 0 auto;
	width: 138px;
}

.team-social-item
{
	border: 5px solid transparent;
	width: 32px;
	height: 32px;
	float: left;
}

.team-social-item a
{
	border: 5px solid transparent;
	display: block;
	width: 32px;
	height: 32px;
	text-indent: -9999px;
}

.team-social-item.facebook a:hover,
.team-social-item.twitter a:hover,
.team-social-item.linkedin a:hover
{
	border: 5px solid #66e7f3;
	border-radius: 100px;
}

.team-social-item.facebook a
{
	background: url("../img/team-facebook.png") center center no-repeat;
}

.team-social-item.twitter a
{
	background: url("../img/team-twitter.png") center center no-repeat;
}

.team-social-item.linkedin a
{
	background: url("../img/team-linkedin.png") center center no-repeat;
}

.team-members:hover
{
	background: url("../img/html.jpg") repeat;
	color: #16a6b6;
}

.team-members p
{
	padding-top: 15px;
	font-family: 'Text Me One', sans-serif;
	font-size: 14px;
	vertical-align: middle;
	display: table-cell;
	font-weight: 300px;
	text-transform: uppercase;
	letter-spacing: 2px;
}


/* === Skills (About) Section === */

#skills
{
	padding: 30px 0;
}

.my-skills h2
{
	padding: 10px 0 30px 0;
}

.center
{
	float: none;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.list-small > li
{
	font-size: 12px;
	word-spacing: 1px;
	line-height: 14px;
	vertical-align: top;
}

.list-inline-block > li
{
	margin-top: 0;
	display: -moz-inline-stack;
	display: inline-block;
	vertical-align: middle;
}

.list-small > li
{
	font-size: 12px;
	word-spacing: 1px;
	line-height: 14px;
}

.fonts-display-cnd
{
	font-family: 'Text Me One', sans-serif;
	text-transform: none;
	letter-spacing: 0;
}

.list-inline-block.list-small.fonts-display h4
{
padding: 15px 0 0 0;
}


/* === Projects section  === */

#projects
{
	text-align: center;
	padding: 30px 0 30px 0;
	position: relative;
}

.projects-items,
#projects-filters,
.skill-container ul
{
	list-style: none;
	padding: 15px 0 0 0;
}

.projects-items
{
	display: inline-block;
	width: 100%;
	height: 100%;
}

.projects-items li
{
	float: left;
	width: 245px;
}

.projects-items li,
#projects-filters li
{
	display: inline-block;
	padding:0;
}

.item
{
	cursor:pointer;
	display: inline-block;
	margin:0;
	padding:0;
}

.item span { display: none; }

.item-info-wrap
{
	width:30%;
	padding:1% 1%;
	float:left;
}

.item-description
{
	font-size: 14px;
}

.item-preview
{
	display: inline-block;
	padding: 4px 12px;
	margin-bottom: 0;
	font-size: 13px;
	line-height: 20px;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	color: #FFF;
	position: relative;
	z-index: 9999;
	text-decoration:none;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}

.item-info-wrap .item-description,
.item-info-wrap .item-title,
.item-info-wrap .item-social,
.item-info-wrap .preview
{
	background: rgba(217, 217, 217, .35);
	padding: 10px;
}

.item-info-wrap .item-title
{
	text-align: center;
	font-size: 17px;
}

.item-info-wrap .fb-like{ margin-right: 10px; }

.item-social
{
	padding: 5px;
	background: rgba(217, 217, 217, 0.4);
	position: relative;
	z-index: 9999;
}

#filtered-list .gap { display: inline-block; }

#projects-filters li
{
	font-family: 'Text Me One', sans-serif;
	text-transform: uppercase;
	position: relative;
	margin: 0px 0px 2px 4px;
	padding: 4px 13px;
	font-size: 18px;
	color: #3F3F3F;
	overflow: hidden;
	text-decoration: none;
	outline: none;
	text-align: center;
	line-height: 200%;
	cursor: pointer;
}

#projects-filters .active,
#projects-filters li:hover
{
	background-color: #fe617b;
	color: #fff;
}

.projects-items li .title,
.projects-items li .description,
.projects-items li .preview
{ display: none; }

.projects-items img
{
	width: 245px;
	height: auto;
}

::selection
{
	color: #fff;
	background: #fe617b;
}

#filtered-list:after
{
	content: '';
	display: inline-block;
	width: 100%;
}

#filtered-list .mix
{
	display: none;
	opacity: 0;
}

/* === Gray scale picture === */

.projects-items .item img
{
	filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}


.projects-items .item img:hover
{
	filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);
	-webkit-transition: all .6s ease;
	-moz-transition: all .6s ease;
}

/* === SERVICES section  === */

.services-wrapper
{
	margin: 0 auto;
	display: inline-block;
}

.services-item
{
	float: left;
	position: relative;
	padding: 15px 15px 30px 15px;
}

.services-item h3
{
	padding: 10px 0 0 0;
}

.services-item ul
{
	padding: 10px 0 0 0;
	margin-left: 45px;
	text-align: left;
}

.services-item li
{
	list-style: disc;
}

#services
{
	text-align: center;
	position: relative;
	padding: 0 0 15px 0;
}

#services p
{
	font-size: 18px;
	line-height: 25px;
	width: 676px;
}


/* === Coments Opinion Section  === */

#opinions
{
	text-align: center;
	padding: 30px 0;
	position: relative;
}

.content-opinion
{
	width: 100%;
	display: inline-block;
	position: relative;
}

ul.slider-markers
{
	padding: 9px;
}

.slider
{
	position: absolute;
}

.our-coments h2
{
	padding: 10px 0 0 0;
}

.slider > li:first-child
{
	display: block;
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	opacity: 1;
}

.slider > li
{
	display: none;
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	opacity: 0;
	-webkit-font-smoothing: antialiased;
	top: 0;
	left: 0;
	width: 100%;
}

.list-opinion
{
	position: relative;
	padding: 15px;
}

ul.slider-markers
{
	display: inline-block;
	position: relative;
	text-align: center;
	width: 100%;
	margin: 0;
	padding: 0;
}

/* === Social Section  === */

#social
{
	position: relative;
	text-align: center;
	padding: 15px 0;
}

.social-item
{
	border: 5px solid transparent;
	width: 130px;
	height: 160px;
	overflow: hidden;
}

.social-item a
{
	border: 5px solid transparent;
	display: block;
	width: 120px;
	height: 120px;
	text-indent: -9999px;
}

#social .facebook a
{
	background: url("../img/facebook.png") center center no-repeat;
}

#social .twitter a
{
	background: url("../img/twitter.png") center center no-repeat;
}

#social .linkedin a
{
	background: url("../img/linkedin.png") center center no-repeat;
}

#social .skype a
{
	background: url("../img/skype.png") center center no-repeat;
}

.facebook a:hover,
.twitter a:hover,
.linkedin a:hover,
.skype a:hover
{
	border: 5px solid #66e7f3;
	border-radius: 100px;
}

/* === Contact form Section  === */

#contacts
{
	position: relative;
	text-align: center;
	padding: 80px 0 15px 0;
}

.contact-wrap
{
	float: left;
	width: 840px;
	margin: 0 20px;
	clear: both;
}

.field input
{
	border:none;
	height: 35px;
	display: block;
	margin:10px auto;
	width: 60%;
	font-family: 'Text Me One', sans-serif;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 3px;
	padding-left: 10px;
	outline: none;
	background-color: #bbe1bb;
}

.field textarea
{
	border:none;
	height: 150px;
	display: block;
	margin:10px auto;
	width: 60%;
	font-family: 'Text Me One', sans-serif;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 3px;
	padding-left: 10px;
	padding-top: 12px;
	outline: none;
	background-color: #bbe1bb;
}

#submit
{
	cursor: pointer;
	text-indent: -9999px;
	border:none;
	height: 35px;
	width: 61%;
	padding-left: 10px;
	outline: none;
	background: #bbe1bb url(../img/mail.png) center center no-repeat;
	cursor: pointer;
}

#submit:hover
{
	background: #36d7b7 url(../img/mail.png) center center no-repeat;
}

#callback
{
	width: 60%;
	margin: 0 auto;
}

.error
{
	background: rgba(255, 131, 136, 0.4) url("../img/error.png") no-repeat 10px center;
	padding: 10px 10px 10px 55px;
	color: #7E0F00;
	border: 1px solid #8A1F11;
}

.success
{
	background: rgba(212, 255, 205, 0.35) url("../img/success.gif") no-repeat 10px center;
	padding: 10px;
	border: 1px solid #258815;
	color: #0D5E00;
}

.sending .send-overlay
{
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	left:0;
/*	background-color: rgba(0, 0, 0, 0.3); */
	z-index: 555;
	background-image: url("../img/loader.gif");
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

/* === Find Section  === */

#find
{
	text-align: center;
	padding: 30px 0;
	position: relative;
}

.phone-email
{
	width: 250px;
	height: 250px;
	position: relative;
	float: left;
	background-color: #fff;
}

.phone-email:hover
{
	background-color: #66e7f3;
	color: #fff;
}

.find-text
{
	width: 250px;
	height: 250px;
	font-family: 'Text Me One', sans-serif;
	font-size: 14px;
	vertical-align: middle;
	display: table-cell;
	font-weight: 300px;
	text-transform: uppercase;
	letter-spacing: 2px;

}

.location
{
	width: 250px;
	height: 250px;
	vertical-align: middle;
	display: table-cell;
	overflow: hidden;
}

/* == Footer Section == */

.footer
{
	background: url("../img/chlo.jpg") repeat;
	text-align: center;
}

.footer a
{
	color: #66e7f3;
	font-size: 20px;
	vertical-align: middle;
}

.footer h1
{
	padding: 80px;
	vertical-align: middle;
}

.find-items
{
	width: 780px;
	margin: 30px auto;
}

.map
{
	width: 250px;
	height: 250px;
	position: relative;
	margin-right: 15px;
	float: left;
	background-color: #fff;

}

.map:hover
{
	background-color: #66b8f3;
}

.address
{
	width: 250px;
	height: 250px;
	position: relative;
	margin-right: 15px;
	float: left;
	background-color: #cfcbcb;
}

.address:hover
{
	background-color: #66e7f3;
	color: #fff;
}

/* === Rotate icons === */

.twitter a:hover,
.facebook a:hover,
.linkedin a:hover,
.skype a:hover
{
    animation: spinAround .5s linear;
    -webkit-animation: spinAround .5s linear;
    -moz-animation: spinAround .5s linear;
}

@-webkit-keyframes spinAround {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spinAround {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@-moz-keyframes spinAround {
    from {
        -moz-transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(360deg);
    }
}

.slider-markers a
{
	display: inline-block;
	position: relative;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #2DE4DD;
	margin: 3px;
	cursor: pointer;
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset, 1px 1px 1px rgba(255, 255, 255, 0.1);
	text-indent: -9999px;
}

.slider-markers a.active:after
{
	content: '';
	width: 8px;
	height: 8px;
	position: absolute;
	top: 2px;
	left: 2px;
	border-radius: 50%;
	background: #FFF;
	background: -moz-linear-gradient(top, #FFF 0%, #F6F6F6 47%, #EDEDED 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFF), color-stop(47%,#F6F6F6), color-stop(100%,#EDEDED));
	background: -webkit-linear-gradient(top, #FFF 0%,#F6F6F6 47%,#EDEDED 100%);
	background: -o-linear-gradient(top, #FFF 0%,#F6F6F6 47%,#EDEDED 100%);
	background: -ms-linear-gradient(top, #FFF 0%,#F6F6F6 47%,#EDEDED 100%);
	background: linear-gradient(top, #FFF 0%,#F6F6F6 47%,#EDEDED 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );
}

.slider li.hide{ visibility: hidden; }
.slider li.show{ visibility: visible; }

.hide{ visibility: hidden; }
.show{ visibility: visible; }


.scrollup
{
    width:40px;
    height:40px;
    position:fixed;
    bottom:50px;
    right:100px;
    display:none;
    text-indent:-9999px;
    background: url("../img/top.png") no-repeat;
}