/* ---------------------------------------------------------------------- */
/*	Reset & Clearfix (normalize.css v3.0.2)
/* ---------------------------------------------------------------------- */

html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

*,
*:before,
*:after {
  box-sizing: border-box;
}

.clearfix:after {clear: both;content: "";display: table;}

/* ---------------------------------------------------------------------- */
/*	GRID
/* ---------------------------------------------------------------------- */

.container {background: #fff; margin: 0 auto; max-width: 100%; padding: 1.25em;}
.row {}
.row:last-child {margin-bottom: 0;}
div[class*="col-"] {float: left; padding: .75em;}
div[class*="col-"] img{max-width: 100%;}

@media all and (min-width: 37em) {
  .col-2-3 {width: 66.66%;}
  .col-1-2 {width: 50%;}
  .col-1-2:nth-child(2n+1){clear:left}
  .col-1-3 {width: 33.33%;}
  .col-1-3:nth-child(3n+1){clear:left}
  .col-1-4 {width: 25%;}
  .col-1-4:nth-child(4n+1){clear:left}
  .col-3-4 {width: 75%;}
  .col-1-5 {width: 20%;}
  .col-1-5:nth-child(5n+1){clear:left}
  .col-1-8 {width: 12.5%;}
}


/* ---------------------------------------------------------------------- */
/*	Basic Elements & Classes
/* ---------------------------------------------------------------------- */

html{height:100%;}
body {
	background: #262A2D;
	color: #fff;
	font:14px/1.7 'Poppins', sans-serif;
	font-weight: 300;
	-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
	-webkit-text-size-adjust: 100%;
	height:100%;
	width:100%;
	overflow-x:hidden;
	letter-spacing: 1px;
	text-align: center;
}

::-moz-selection { background: rgba(57, 95, 132, 1); color: #fff; text-shadow: none; }
::selection { background: rgba(57, 95, 132, 1); color: #fff; text-shadow: none; }

a {text-decoration: none; color: #d7569d;}

h1, h1 a {font-size: 22px; font-weight: 600; text-align: center; margin: 0px 0px 20px 0px;}
h2, h2 a {font-size: 22px; font-weight: 300; margin: 0px 0px 10px 0px; text-transform: uppercase; color: #1AA0E0}
h3, h3 a {font-size: 16px; font-weight: 300; margin: 0px; text-transform: uppercase; line-height: 110%;}
h4, h4 a {font-size: 16px; font-weight: 300; margin: 10px 0px;}


.margin-top{margin-top: 40px;}
.margin-bottom:{margin-bottom: 40px;}
.no-margin{margin: 0px;}
.center {text-align: center;}
.left {text-align: left;}
.right {text-align: right;}

.fit {max-width: 100%;}
.fit>* {max-width: 100%;}


.sidenav.activesidebar {width: 100%;}

.sidenav {height: 100%; width: 0; position: fixed; z-index: 1; top: 0; right: 0; background-color: rgba(14, 13, 13, 0.9);overflow-x: hidden; padding-top: 0; -webkit-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out;}

.sidenav > ul.nav {position: relative;top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); list-style-type: none; margin: 0px; padding: 0px;}

.sidenav  ul.nav > li {text-align: center; font-size: 22px; text-transform: uppercase; margin-bottom: 10px; font-weight: 600}

.mainbg {position: relative; width: 100%; height: 100vh; background: no-repeat 50% 50%; background-size: cover; -webkit-transition: background .5s ease-out; -moz-transition: background .5s ease-out; -o-transition: background .5s ease-out; transition: background .5s ease-out; opacity: 0;}

 #canvas { position:absolute; margin:auto; left:0;right:0; top:-100px;bottom:0;}
  
a.down {position: absolute; bottom: 30px; left: 50%; color: #fff;-webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}
a.down i {font-size: 80px; color: #fff;}

a.menu-button{position: fixed; z-index: 9999; background: #d7569d; top:30px; right:30px; padding: 6px 12px;}
a.menu-button i {color: #fff;}

.slide {position: relative; width: 100%;}
.inner {max-width: 710px; margin: 0px auto; padding: 100px 20px; box-sizing: border-box; text-align: center}
.inner-big {max-width: 1200px; margin: 0px auto; padding: 100px 20px; box-sizing: border-box;}

#about .row {margin: 30px auto 0px auto; width: 80%;}
#about .col-1-3{text-align: center;}
#about .circle {webkit-border-radius: 50%; border-radius: 50%; border: 2px solid #fff; display: block; width: 100px; height: 100px; text-align: center; font-size: 30px; font-weight: bold; line-height: 100px; margin: 0px auto 20px auto}

#services {background: #161719;}
#services .col-1-3 {padding: 30px; background: rgba(255, 255, 255, 0.05); min-height: 445px; margin-right: 30px; width: 350px; padding: 40px; box-sizing: border-box;}

input, textarea{width: 97%; padding: 8px; border: 1px solid rgba(204, 204, 204, 0.45); background: none; margin-bottom: 20px;}

button {padding: 8px 11px; border: 1px solid rgba(204, 204, 204, 0.45); background: none; text-align: left; margin: 0px; width: 120px; background: rgba(0, 0, 0, 0.13); margin-top: -20px; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out;}
button:hover{background: #d7569d}

#contacts .inner-big{padding-bottom: 70px;}
#contacts li {list-style-type: none; margin-bottom: 20px;}
#contacts .col-1-2:first-of-type{width: 66%}
#contacts .col-1-2:last-of-type{width: 33%}

label.error{display: none!important;}
input.error, textarea.error{border: 1px solid #d7569d}
.copyright{text-align: center; color: #ccc;}


@media only screen and (max-width: 540px) {
	.inner, .inner-big {width: 100%;}
	.inner-big{padding:40px 20px;}
	.col-1-3, .col-1-2 {width: 100%!important; display: block}
	#services .col-1-3{margin-left: 0px!important; margin-bottom: 20px; min-height: auto!important}
}