@import url('http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
* {
 margin: 0;
 padding: 0;
}
html,body,h1,h2,h3,h4,h5,div,span,p,ul,ol {
 padding: 0;
 margin: 0;
}

body {
 font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
 background: #f7f7f7;
}
.wrapper {

}

/*Настройки текста*/
h1,h2,h3,h4,h5 {
 font-family: 'Exo 2', sans-serif;
 font-weight: 300;
}
h1 {
 margin:0 !important;
}
a {
 color:#00bcd4;
}

fieldset {
 padding: 20px;
 margin: 20px 0;
}
fieldset td input[type=text] {
 height: 48px;
 border:1px solid #e4e4e4;
 width: 100%;
 padding: 0 10px;
 box-sizing:border-box;
 margin-top:10px;
}
fieldset td textarea {
 min-height: 80px;
 margin-top:10px;
 border:1px solid #e4e4e4;
 width: 100%;
 padding: 5px 10px;
 box-sizing:border-box;
 resize: vertical;
}
/*Menu*/
.menu {
 /*-webkit-filter: url("#shadowed-goo");
 -moz-filter: url("#shadowed-goo");
 filter: url("#shadowed-goo");*/
}
.menu-open-button {
 text-decoration: none !important;
 box-shadow: 1px 2px 2px rgba(0,0,0,0.3);
 -webkit-box-shadow: 1px 2px 2px rgba(0,0,0,0.3);
 -moz-box-shadow: 1px 2px 2px rgba(0,0,0,0.3);
 -o-box-shadow: 1px 2px 2px rgba(0,0,0,0.3);
}
.menu-item, .menu-open-button {
 background: #00bcd4;
 border-radius: 100%;
 width: 80px;
 height: 80px;
 margin-left: -40px;
 position: absolute;
 top: 20px;
 color: white;
 text-align: center;
 line-height: 80px;
 -webkit-transition: all ease 0.3s;
 -moz-transition: all ease 0.3s;
 -ms-transition: all ease 0.3s;
 -o-transition: all ease 0.3s;
 transition: all ease 0.3s;
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
 -webkit-transition: -webkit-transform ease-out 200ms;
 transition: transform ease-out 200ms;
}
.menu-item {
 -webkit-transition: all ease 0.4s;
 -moz-transition: all ease 0.4s;
 -ms-transition: all ease 0.4s;
 -o-transition: all ease 0.4s;
 transition: all ease 0.4s;
 box-shadow: 1px 2px 2px rgba(0,0,0,0.3);
 -webkit-box-shadow: 1px 2px 2px rgba(0,0,0,0.3);
 -moz-box-shadow: 1px 2px 2px rgba(0,0,0,0.3);
 -o-box-shadow: 1px 2px 2px rgba(0,0,0,0.3);
}
.menu-item i {
 line-height: 80px;
}
.menu-open {
 display: none;
}

.hamburger {
 width: 25px;
 height: 3px;
 background: white;
 display: block;
 position: absolute;
 top: 50%;
 left: 50%;
 margin-left: -12.5px;
 margin-top: -1.5px;
 -webkit-transition: -webkit-transform 200ms;
 transition: transform 200ms;
}

.hamburger-1 {
 -webkit-transform: translate3d(0, -8px, 0);
 transform: translate3d(0, -8px, 0);
}

.hamburger-2 {
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}

.hamburger-3 {
 -webkit-transform: translate3d(0, 8px, 0);
 transform: translate3d(0, 8px, 0);
}

.menu-open:checked + .menu-open-button .hamburger-1 {
 -webkit-transform: translate3d(0, 0, 0) rotate(45deg);
 transform: translate3d(0, 0, 0) rotate(45deg);
}
.menu-open:checked + .menu-open-button .hamburger-2 {
 -webkit-transform: translate3d(0, 0, 0) scale(0.1, 1);
 transform: translate3d(0, 0, 0) scale(0.1, 1);
}
.menu-open:checked + .menu-open-button .hamburger-3 {
 -webkit-transform: translate3d(0, 0, 0) rotate(-45deg);
 transform: translate3d(0, 0, 0) rotate(-45deg);
}

.menu {
 padding-left: 80px;
 width: 650px;
 height: 150px;
 box-sizing: border-box;
 font-size: 20px;
 text-align: left;
 position: relative;
 z-index: 99;
 top: 15px;
}

.menu-item:hover {
 background: white;
 color: #00bcd4;
}
.menu-item:nth-child(3) {
 -webkit-transition-duration: 180ms;
 transition-duration: 180ms;
}
.menu-item:nth-child(4) {
 -webkit-transition-duration: 180ms;
 transition-duration: 180ms;
}
.menu-item:nth-child(5) {
 -webkit-transition-duration: 180ms;
 transition-duration: 180ms;
}
.menu-item:nth-child(6) {
 -webkit-transition-duration: 180ms;
 transition-duration: 180ms;
}

.menu-open-button {
 z-index: 2;
 -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
 transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
 -webkit-transition-duration: 400ms;
 transition-duration: 400ms;
 -webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
 transform: scale(1.1, 1.1) translate3d(0, 0, 0);
 cursor: pointer;
}

.menu-open-button:hover {
 -webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
 transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}

.menu-open:checked + .menu-open-button {
 -webkit-transition-timing-function: linear;
 transition-timing-function: linear;
 -webkit-transition-duration: 200ms;
 transition-duration: 200ms;
 -webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
 transform: scale(0.8, 0.8) translate3d(0, 0, 0);
}

.menu-open:checked ~ .menu-item {
 -webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
 transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.menu-open:checked ~ .menu-item:nth-child(3) {
 -webkit-transition-duration: 190ms;
 transition-duration: 190ms;
 -webkit-transform: translate3d(100px, 0, 0);
 transform: translate3d(100px, 0, 0);
}
.menu-open:checked ~ .menu-item:nth-child(4) {
 -webkit-transition-duration: 290ms;
 transition-duration: 290ms;
 -webkit-transform: translate3d(200px, 0, 0);
 transform: translate3d(200px, 0, 0);
}
.menu-open:checked ~ .menu-item:nth-child(5) {
 -webkit-transition-duration: 390ms;
 transition-duration: 390ms;
 -webkit-transform: translate3d(300px, 0, 0);
 transform: translate3d(300px, 0, 0);
}
.menu-open:checked ~ .menu-item:nth-child(6) {
 -webkit-transition-duration: 490ms;
 transition-duration: 490ms;
 -webkit-transform: translate3d(400px, 0, 0);
 transform: translate3d(400px, 0, 0);
}
.menu-open:checked ~ .menu-item:nth-child(7) {
 -webkit-transition-duration: 490ms;
 transition-duration: 490ms;
 -webkit-transform: translate3d(500px, 0, 0);
 transform: translate3d(500px, 0, 0);
}
/*content*/
.content {
 width: 770px;
 margin: 0 auto;
}

.main__content {
 width: 730px;
 margin: 0 auto;
 padding: 0 20px;
}
.main__content h1 {
 padding-bottom: 20px;
 font-size: 48px;
}
.main__content p {
 font-size: 16px;
 line-height: 22px;
 padding-bottom: 15px;
}
.main__content ul {
 padding-left: 40px;
 padding-bottom: 15px;
}
.main__content ul li {
 font-size: 16px;
 line-height: 22px;
}

.content .logo {
 text-align: center;
 width: 500px;
 height: 500px;
 position: absolute;
 top: 50%;
 margin-top: -280px;
 left: 50%;
 margin-left: -250px;
 /* -webkit-filter: url("#shadowed-goo2");
 filter: url("#shadowed-goo2");
 border-radius: 50%;
 -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
 -o-border-radius: 50%;
 background: #fff;*/
}
.content .logo h1 {
 font-size: 48px;
 padding-top: 200px;
 text-transform: none;
}
.content .logo h1 span {
 color: #00bcd4;
}
.content .logo svg {
 position: absolute;
 top: 0px;
 left: 0px;
}

#layer-1 {
 -webkit-animation-name: spin;
 -webkit-animation-duration: 4000ms;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-timing-function: linear;
 -moz-animation-name: spin;
 -moz-animation-duration: 4000ms;
 -moz-animation-iteration-count: infinite;
 -moz-animation-timing-function: linear;
 -ms-animation-name: spin;
 -ms-animation-duration: 4000ms;
 -ms-animation-iteration-count: infinite;
 -ms-animation-timing-function: linear;

 animation-name: spin;
 animation-duration: 4000ms;
 animation-iteration-count: infinite;
 animation-timing-function: linear;
}
@-ms-keyframes spin {
 from { -ms-transform: rotate(0deg); }
 to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
 from { -moz-transform: rotate(0deg); }
 to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
 from { -webkit-transform: rotate(0deg); }
 to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
 from {
 transform:rotate(0deg);
 }
 to {
 transform:rotate(360deg);
 }
}

.shape-4, .shape-5, .shape-6 {

}
.shape-1, .shape-4 {
 opacity: 0.2;
}
.shape-2, .shape-5 {
 opacity: 0.5;
}
.shape-3, .shape-6 {
 opacity: 0.5;
}

/*Portfolio*/
.ch-grid {
 margin: 20px 0 0 0;
 padding: 0 !important;
 list-style: none;
 display: block;
 text-align: center;
 width: 100%;
}

.ch-grid:after,
.ch-item:before {
 content: '';
 display: table;
}

.ch-grid:after {
 clear: both;
}

.ch-grid li {
 width: 220px;
 height: 220px;
 display: inline-block;
 margin: 0 20px 20px 0;
}
.ch-item {
 width: 100%;
 height: 100%;
 display:block;
 text-decoration:none !important;
 border-radius: 50%;
 position: relative;
 cursor: default;
 box-shadow:
 inset 0 0 0 0 rgba(0,188,212, 0.6),
 inset 0 0 0 16px rgba(255,255,255,0.3),
 0 1px 2px rgba(0,0,0,0.1);
 transition: all 0.4s ease-in-out;
}
.ch-info {
 position: absolute;
 width: 100%;
 height: 100%;
 border-radius: 50%;
 overflow: hidden;
 opacity: 0;
 transition: all 0.4s ease-in-out;
 transform: scale(0);
 cursor:pointer;
 backface-visibility: hidden;
}
.ch-info:before {
 height: 100%;
 cursor:pointer;
 content: '';
 width: 0;
 display: inline-block;
 vertical-align: middle;
}
.ch-info .descr {
 display: inline-block;
 vertical-align: middle;
 width: 215px;
}

.ch-info h3 {
 color: #fff;
 text-transform: none;
 position: relative;
 font-size: 20px;
 margin: 0 30px;
 padding: 5px 0 10px 0;
 font-weight: 300;
 text-shadow:
 0 0 1px #fff,
 0 1px 2px rgba(0,0,0,0.3);
}
.ch-info p {
 color: #fff;
 padding: 10px 5px;
 font-style: italic;
 margin: 0 30px;
 font-size: 12px;
 border-top: 1px solid rgba(255,255,255,0.5);
}
.ch-item:hover {
 box-shadow:
 inset 0 0 0 110px rgba(0,188,212, 0.6),
 inset 0 0 0 16px rgba(255,255,255,0.8),
 0 1px 2px rgba(0,0,0,0.1);
}
.ch-item:hover .ch-info {
 opacity: 1;
 transform: scale(1);
}

/*Contacts*/
.main__content:after {
 content: '';
 clear: both;
 display: table;
}
.main__content .contactContent {
 float: left;
 width: 350px;
}
.main__content .contactContent h1 {
 position: relative;
 right: 2px;
 padding-top: 5px;
}
.main__content .contactContent h2 {
 font-size: 24px;
 font-weight: 400;
}
.main__content form {
 float: right;
 width: 350px;
}
.main__content form input {
 padding: 0 10px;
 height: 48px;
 border: 1px solid #e4e4e4;
 color: #333;
 font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
 font-size: 13px;
 display: block;
 width: 100%;
 outline: none;
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 margin-top: 15px;
 border-radius: 5px;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
}
.main__content form textarea {
 padding: 5px 10px;
 resize: vertical;
 min-height: 80px;
 border: 1px solid #e4e4e4;
 color: #333;
 font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
 font-size: 13px;
 width: 100%;
 outline: none;
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 margin-top: 15px;
 border-radius: 5px;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
}
.main__content form input:focus,.main__content form textarea:focus {
 border-color: #00bcd4;
}
.main__content form input[type=submit] {
 width: 200px;
 cursor: pointer;
 font-family: "Exo 2", Arial, "Helvetica Neue", Helvetica, sans-serif;
 font-size: 16px;
 text-transform: uppercase;
 font-weight: bold;
 border-radius: 5px;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 background: #00bcd4;
 color: #fff;
 text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
 -webkit-transition: all ease 0.4s;
 -moz-transition: all ease 0.4s;
 -ms-transition: all ease 0.4s;
 -o-transition: all ease 0.4s;
 transition: all ease 0.4s;
}
.main__content form input[type=submit]:hover {
 background: #333;
 color: #fff;
}

/*Absolutes*/
.main__content {
 top: 150px;
 margin: 0 auto;
 z-index: 23;
}

/*Footer*/
footer {
 position: absolute;
 width: 100%;
 bottom: 0;
 padding: 20px 0;
 margin-top: 20px;
}
footer p {
 font-size: 13px;
 text-align: center;
}
footer a {
 color:#333;
}
footer a:hover {
 color: #00bcd4;
}
footer a.wild {
 font-size: 18px;
 color: #333;
 font-family: 'Trade Winds', cursive;
 text-decoration: none;
 -webkit-transition: all ease 0.4s;
 -moz-transition: all ease 0.4s;
 -ms-transition: all ease 0.4s;
 -o-transition: all ease 0.4s;
 transition: all ease 0.4s;
}
footer a.wild:hover {
 color: #00bcd4;
}

.social-icon { margin-top:15px; margin-right: 5px; text-align: center; display: inline-block; width:40px; height:40px;line-height:40px; background: #333;
 color:#fff; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; transition: all ease 0.3s;
 -webkit-transition: all ease 0.3s;
 -moz-transition: all ease 0.3s;
 -o-transition: all ease 0.3s;
}
.social-icon i { line-height: 40px;}
.social-icon:hover { background:#00bcd4;}

#home {
 overflow: hidden;
}

body {
 overflow-x: hidden;
 -ms-overflow-x: hidden;
}

/*Responsive*/
@media screen and (max-width: 720px) and (max-height: 800px) {

 .content .logo {
 position: relative;
 top: 0;
 left: 0;
 margin: 0 auto;
 margin-top: -40px;
 text-align: center;
 }
 footer {
 position: relative;
 }
}

@media screen and (max-width: 800px) {
 .content,footer {
 width: 90%;
 margin: 0 auto;
 }
 .main__content {
 width: 100%;
 padding:0;
 }
 .main__content form,.main__content .contactContent {
 float: none;
 max-width: 98%;
 margin: 30px auto !important;
 }
}
@media screen and (max-width: 650px) {
 .menu {
 padding-left:55px;
 }
 .menu-open:checked ~ .menu-item:nth-child(3) {
 -webkit-transform: translate3d(30px, 70px, 0);
 transform: translate3d(40px, 70px, 0);
 }
 .menu-open:checked ~ .menu-item:nth-child(4) {
 -webkit-transform: translate3d(80px, 0, 0);
 transform: translate3d(100px, 0, 0);
 }
 .menu-open:checked ~ .menu-item:nth-child(5) {
 -webkit-transform: translate3d(130px, 70px, 0);
 transform: translate3d(160px, 70px, 0);
 }
 .menu-open:checked ~ .menu-item:nth-child(6) {
 -webkit-transform: translate3d(180px, 0, 0);
 transform: translate3d(220px, 0, 0);
 }
 .menu-open:checked ~ .menu-item:nth-child(7) {
 -webkit-transform: translate3d(230px, 70px, 0);
 transform: translate3d(280px, 70px, 0);
 }
 .main__content {
 margin-top:50px;
 }
 .main__content h1 {text-align:center;}
}
@media screen and (max-width: 520px) {
 .content .logo {
 width:100%;
 height:auto;
 }
 .content .logo svg {display:none}
 .content .logo h1 {
 padding-top: 120px !important;
 }
 .content .logo p {
 padding-bottom:20px;
 margin-bottom:100px;
 border-bottom:5px solid #00bcd4;
 }
}
.blogItem {
 margin-bottom:20px;
}
.blogItem h2 a,.eTitle a {
 color:#333;
}
.blogItem h2 a:hover,.eTitle a:hover {
 color:#00bcd4;
}
.blogItem .image {
 float: left;
 width:220px;
 margin-right: 20px;
 height: 220px;
 overflow:hidden;
 display: block;
 text-decoration: none !important;
 border-radius: 50%;
 position: relative;
 cursor: default;
 box-shadow: inset 0 0 0 0 rgba(0,188,212, 0.6), inset 0 0 0 16px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.1);
 transition: all 0.4s ease-in-out;
 background-position: center center;
 background-size: cover;
 margin-bottom:20px;
}

.blogContent {
 float:left;
 width:480px;
 max-width:100%;
}
.blogItem:after {content:''; display: table; clear: both;}
.details {
 font-size:16px;
 margin: 5px 0 10px;
}
.sub__content {
 margin-top: 20px;

}
.sub__content hr {
 margin-bottom:15px;
}
.eTitle {

 padding-bottom: 5px;
 font-size: 36px;
}
.eDetails {
 padding:20px 0;
 font-size: 14px;
}
@media screen and (max-width: 650px) {
 .blogItem .image {
 float:none;
 margin: 20px 0;
 }
}
@media screen and (max-width: 800px) {
 .blogContent {
 float:none;
 width: 100%;
 margin:0 0 20px 0;
 }
}
.relatedPosts {
 margin-bottom:25px;
}
.relatedPosts ul {
 padding-left:40px;
}
.relatedPosts li {
 margin-top:10px;
}