body,html {
height:100%;
width:100%;
font-family:'Roboto Condensed',Helvetica,Arial,sans-serif;
color:#757575;
}

img {
max-width:100%;
}

a:link,a:visited {
outline:0;
}

u{
color:#333333;
}
a:active,a:hover {
text-decoration:none;
}

a img {
border:0;
}

b, strong{
font-family:Roboto Condensed,sans-serif;
font-weight:500 !important;
}

h1,h2,h3,h4,h5,h6 {
font-family:Roboto Condensed,sans-serif;
font-weight:100 !important;
}

.navbar {
width:100%;
}

.icon-home:before{
    content: "\f015"; 
    font-family: FontAwesome;
    font-style: normal;
    font-size: 19px;
    line-height: 0;
}

.navbar-default {
background:rgba(255,255,255,.85);
border:0;
color:#777;
text-transform:uppercase;
display:inline-block;
text-align:center;
position:fixed;
}
.navbar-default .navbar-nav > li > a {
}


.padding {
    padding: 0 5px 0 5px;
}

.text-center {
    text-align: center;
}

.navbar-nav {
list-style:none;
display:inline-block;
float:none;
font-size:1em;
font-weight:100;
margin:0 auto;
padding:0;
}

.navbar-default .navbar-nav>li>a:focus,.navbar-default .navbar-nav>li>a:hover {
background-color:transparent;
}

.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:focus,.navbar-default .navbar-nav>.active>a:hover {
background:0 0;
}

#page-welcome {
background:url("../img/back.jpg") center 0/cover no-repeat fixed;
background-size: auto 90%;
background-position:center 55px;
min-height: 100%;
max-height: 100%;
}

.patternwelcome{
    background: url("../img/overlays/pattern.png");
	padding-bottom:1133px;
	
}

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

}
@media screen and (min-width: 992px) and (max-width:1300px)
{
}
@media screen and (min-width: 992px) and (max-width:1199px)
{
}
@media screen and (min-width: 768px) and (max-width: 991px)
{
}
@media screen and (min-width: 300px) and (max-width: 767px)
{
}



#page-welcome header {
color:#fff;
}

#page-welcome header h1 {
font-size:4.5em;
font-weight:700 !important;
letter-spacing:.1em;
line-height:1em;
text-transform:uppercase;
margin:0;
padding:0;
}

#page-welcome header p {
font-size:2em;
display:inline-block;
margin-bottom:5px;
letter-spacing:.1em;
line-height:3em;
text-transform:uppercase;
padding:0 8px;
}

#page-selfdev .selfdev {
border:5px solid #333;
width:225px;
margin:0 20px 20px 0;
}


.partners img{
padding: 10px;
width:150px;
outline: none;
border:none;
}



#page-skills {
background:#f7f7f7;
text-align:center;
padding:75px 0;
}

#page-documents {
background:#f7f7f7;
padding:75px 0;
}

#page-documents img{
transition: all 1s;
opacity:0.7;
padding: 30px;
}

#page-documents img:hover{
opacity:1;
}


#page-contact {

}

#page-contact .contact-info p {
font-size:1.2em;
font-weight:100;
}

#grid-controls-wrapper {
text-align:center;
float:none;
width:100%;
padding-bottom:50px;
}

.center-pills {
display:inline-block;
}


#grid img
{
width:250px;
height:250px;
padding:3px;
border: 1px solid #ddd;
}

#grid .mix {

vertical-align:top;
color:#fff;
text-align:center;
display:block;
margin:17px 17px 17px 0;
overflow:hidden;
}

#grid .mix .thumbnail {
border:2px thin #F7F7F7;
border-radius:0;
padding:0;
}

#grid .mix .overlay {
width:250px;
height:250px;
position:absolute;
opacity:0;
transition: all 1s;
}

#grid .mix .overlay:hover {
opacity:.8;
}

#grid .mix .overlay i {
font-size:2em;
opacity:1;
color:#fff;
padding-top:45%;
}

.isotope-item {
z-index:2;
}

.isotope-hidden.isotope-item {
pointer-events:none;
z-index:1;
}

.isotope,.isotope .isotope-item {
-webkit-transition-duration:.8s;
-moz-transition-duration:.8s;
-ms-transition-duration:.8s;
-o-transition-duration:.8s;
transition-duration:.8s;
}

.isotope {
-webkit-transition-property:height,width;
-moz-transition-property:height,width;
-ms-transition-property:height,width;
-o-transition-property:height,width;
transition-property:height,width;
}

.isotope .isotope-item {
-webkit-transition-property:0;
-moz-transition-property:0;
-ms-transition-property:0;
-o-transition-property:0;
transition-property:transform,opacity;
}

.isotope .isotope-item.no-transition,.isotope.no-transition,.isotope.no-transition .isotope-item {
-webkit-transition-duration:0;
-moz-transition-duration:0;
-ms-transition-duration:0;
-o-transition-duration:0;
transition-duration:0;
}


.slider-controls {
opacity:0;
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
transition:all .4s ease-in-out;
margin:0;
padding:0;
}

.slider-controls li {
list-style:none;
}


.slider-controls li a {
position:absolute;
z-index:10;
top:40%;
width:60px;
height:60px;
cursor:pointer;
}

.next {
background:url(../img/next.png);
margin-right:70px;
right:0;
opacity:.3;
}

.prev {
background:url(../img/prev.png);
margin-left:70px;
left:0;
opacity:.3;
}

.next:hover,.prev:hover {
opacity:1;
}

.section-header p {
font-size:1.5em;
font-weight:100 !important;
}

.section-title {
font-size:3em;
font-weight:700;
letter-spacing:5px;
text-align:center;
color:#555;
text-transform:uppercase;
padding:20px 0;
}

.spacer {
width:100px;
height:2px;
margin:auto;
}

.spacerr {
width:100px;
height:1px;
margin:auto;
margin-top: 25px;
margin-bottom: 25px;
background: #FFF;
}

.section-subtitle {
text-align:center;
padding:30px 0;
}

.form-control {
box-shadow:none;
-webkit-box-shadow:none;
border:0;
}

.btn.btn-default {
background:0 0;
position:relative;
color:#fff;
font-size:1em;
text-transform:uppercase;
font-weight:600;
text-align:center;
cursor:pointer;
border:2px solid #4cddf3;
border-radius:0;
letter-spacing:2px;
pointer-events:auto;
-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;
border-color:#fff;
margin:40px auto 0;
padding:12px 26px;
}

.btn.btn-default:active,.btn.btn-default:hover {
background:#fff;
color:fff;
border-color:#fff;
}

.input-lg,button,input {
border-radius:0;
}

.control-group.error input,.control-group.error select,.control-group.error textarea {
-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);
-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);
box-shadow:inset 0 1px 1px rgba(0,0,0,.075);
border-color:#b94a48;
}

.control-group.error .checkbox,.control-group.error .radio,.control-group.error input,.control-group.error select,.control-group.error textarea {
color:#b94a48;
}


label
{
font-family:Roboto Condensed,sans-serif;
font-weight:100 !important;
}

label.error {
color:#fff;
background:#b94a48;
border:solid thin #fff;
padding:3px 5px;
}

label.valid {
color:#fff;
background:#5CB85C;
border:solid thin #fff;
padding:3px 5px;
}

.chart {
position:relative;
display:inline-block;
width:150px;
height:150px;
margin-top:50px;
margin-bottom:50px;
text-align:center;
}

.chart canvas {
position:absolute;
top:0;
left:0;
}

.percent {
display:inline-block;
line-height:150px;
z-index:2;
}

.percent:after {
content:'%';
margin-left:.1em;
font-size:.8em;
}

.social-icons .btn {
margin-right:15px;
}

.social-icons {
padding-top:10px;
margin-bottom:35px;
}

.social-icons .btn.btn-clear {
border:1px solid #fff;
}

.btn-round {
border-radius:50%;
width:50px;
height:50px;
display:inline-block;
padding:0;
}

.btn-round i {
font-size:20px;
top:15px;
position:relative;
}

.btn.btn-clear {
border:1px solid #fff;
color:#fff;
background:0 0;
background-color:none;
font-weight:700;
-webkit-transition-duration:.8s;
-moz-transition-duration:.8s;
-o-transition-duration:.8s;
transition-duration:.8s;
-webkit-transition-property:0;
-moz-transition-property:0;
-o-transition-property:0;
transition-property:transform;
}

.btn.btn-clear.selected,.btn.btn-clear:hover {
background:#fff;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
}

.btn-twitter:hover {
color:#2BA9E0;
}

.btn-facebook:hover {
color:#204385;
}

.btn-dribbble:hover {
color:#D92C85;
}

.btn-instagram:hover {
color:#BAB1A8;
}

.btn-linkedin:hover {
color:#015786;
}

.btn-pinterest:hover {
color:#CA2128;
}

.btn-google:hover {
color:#D3492C;
}

.left {
float:left;
}

.right {
float:right;
}

.centered {
margin-left:auto;
margin-right:auto;
float:none;
}

.myleft
{
float:left;
text-align: left;
}

/*#page-welcome .container{opacity:0 !important; transition: opacity 2s;}
#page-welcome:hover .container{opacity:1 !important;}*/


#page-portfolio{
background:#fff;
padding-top:75px;
width:100%;
}


#page-portfolio  .container{
padding:0;
margin:0;
width:100% !important;
}


#page-portfolio  #gall{
background: #dddddd;
background:url("../img/back.jpg") center 0/cover no-repeat fixed;
width:100%;
}



#page-about {
background:#fff;
padding:75px 0;
}



#page-selfdev{
background:#dddddd;
padding-top:70px;
}




#page-about strong
{
font-weight: 300;
color: #FF7F00;
}
#page-selfdev strong
{
font-weight: 300;
color: #FF7F00;
}


#page-projecting 
{
background:#dddddd;
background:url("../img/projecting.jpg") center 0/cover no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}

.pattern{
    background: url("../img/overlays/pattern.png");
	padding-top:70px;
	padding-bottom:70px;
}

.patternportfolio{
    background: url("../img/overlays/pattern.png");
	padding-left:15%;
	padding-right:15%;
	transition: all 2s;
}

.pbottom{
    background: url("../img/overlays/pattern.png");
	padding-left:15%;
	padding-right:15%;
	padding-bottom:70px;
	background: rgba(255,255,255,1);
	transition: all 2s;
}

.pattern2{
    background: url("../img/overlays/pattern2.png");
	padding-top:70px;
	padding-bottom:70px;
}
.pattern3{
    background: url("../img/overlays/16.png");
	padding-top:70px;
	padding-bottom:70px;
}


.section-header,.text-center {
text-align:center;
}

@mediamax-width992px{
#page-selfdev .selfdev {
margin:0 auto 20px;
}
}

@media max-width479px{
#page-welcome header h1 {
font-size:2em;
}

#page-welcome header p {
font-size:1em;
line-height:3em;
}

.section-title {
font-size:1.5em;
}

.section-header p {
font-size:1.2em;
}

#grid,#page-skills {
text-align:center;
}

#page-selfdev .selfdev {
margin:0 auto 20px;
}
}




/* ------------------------------------------------------------------
Portfolio
------------------------------------------------------------------- */

/* Portfolio filter */

.filter {
	text-align: center;
	list-style: none;
	padding: 0;
	margin: 0 0 20px;
}

.filter > li {
	display: inline-block;
	padding: 5px 0;
	margin: 0 25px;

}

.filter > li a {
	text-transform: uppercase;
	font-size: 14px;
	color: rgba(102, 102, 102, 0.7);
}

.filter > li a:hover,
.filter > li a.current {
	color: #FF7F00;
}

/* Portfolio grid */

.works-grid {
	list-style: none;
	padding: 0;
	margin: 0;
}



.works-grid.works-grid-gut {
	margin: 0 0 0 -10px;
}

.works-grid.works-grid-gut .work-item {
	padding: 0 0 10px 10px;
}

.work-item {
	width: 50%;
	float: left;
	margin: 0;
}

.works-grid-3 .work-item {
	width: 33.333%;
}

.container > .works-grid-3 .work-item {
	width: 33.2%;
}

.works-grid-4 .work-item {
	width: 25%;
    min-width:100px;
}

.works-grid-a .work-item {
	width: 16.6%;
	opacity:0.9;
}



/* Portfolio item */

.work-item > a {
	position: relative;
	display: block;
	overflow: hidden;
}

.work-image {
	position: relative;
	overflow: hidden;
}

.work-image img {
	display: block;
	overflow: hidden;
	width: 100%;
}

.work-image:after {
	position: absolute;
	display: block;
	content: "";
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
}

.work-caption {
	width: 100%;
	padding: 0 20px;
	opacity: 0;
	position: absolute;
	bottom: 100%;
	left: 0;
	text-align: center;
	overflow: hidden;
}

.work-title {
	font-size: 18px;
	color: #fff;
	margin: 0 0 6px;
}

.work-descr {
	text-transform: uppercase;
	font-size: 14px;
	color: white !important;
	
}

/* */
.works-grid-4 .work-title {
	font-size: 14px;
}

.works-grid-4 .work-descr {
	font-size: 12px;
}

/* Portfolio item hover */

.work-item:hover .work-image:after {
	background: rgba(255, 127, 0, .7) !important;
}


.work-item:hover .work-image > img {
	-webkit-transform: scale(1.1);
	   -moz-transform: scale(1.1);
	    -ms-transform: scale(1.1);
	     -o-transform: scale(1.1);
	        transform: scale(1.1);
}

.work-item:hover .work-caption {
	bottom: 50%;
	opacity: 1;
	z-index: 3;
	-webkit-transform: translateY(50%);
	   -moz-transform: translateY(50%);
	        transform: translateY(50%);
}

/* Work item white background */

.works-grid.works-hover-w .work-title {
	color: #000;
}

.works-grid.works-hover-w .work-descr {
	color: #666;
}

.works-grid.works-hover-w .work-item:hover .work-image:after {
	background: rgba(255, 255, 255, .8);
}

.works-grid.works-hover-g .work-image:after {
	opacity: 0;
}
.works-grid.works-hover-g .work-title,
.works-grid.works-hover-g .work-descr {
	color: #000;
}

.works-grid.works-hover-g .work-item:hover .work-image:after {
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZmZmZmRmIiBzdG9wLW9wYWNpdHk9IjAuOSIvPgogICAgPHN0b3Agb2Zmc2V0PSIyNSUiIHN0b3AtY29sb3I9IiNmZmZmZGYiIHN0b3Atb3BhY2l0eT0iMC45Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmY2YwYjMiIHN0b3Atb3BhY2l0eT0iMC45Ii8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(-45deg,  rgba(255,255,223,0.8) 0%, rgba(255,255,223,0.8) 25%, rgba(252,240,179,0.8) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,223,0.8)), color-stop(25%,rgba(255,255,223,0.8)), color-stop(100%,rgba(252,240,179,0.8))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  rgba(255,255,223,0.8) 0%,rgba(255,255,223,0.8) 25%,rgba(252,240,179,0.8) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  rgba(255,255,223,0.8) 0%,rgba(255,255,223,0.8) 25%,rgba(252,240,179,0.8) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  rgba(255,255,223,0.8) 0%,rgba(255,255,223,0.8) 25%,rgba(252,240,179,0.8) 100%); /* IE10+ */
background: linear-gradient(135deg,  rgba(255,255,223,0.8) 0%,rgba(255,255,223,0.8) 25%,rgba(252,240,179,0.8) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6ffffdf', endColorstr='#e6fcf0b3',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
opacity: 1;
}

/* Portfolio single */

.work-details {
	margin: 0 0 20px;
}

.work-details-title {
	color: #000;
	margin: 0 0 20px;
}

.work-details ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.work-details ul > li {
	margin: 0 0 10px;
}

.work-title > i,
.work-title > span {
	font-size: 30px;
}


.work-caption,
.work-image > img,
.work-image:after {
	-webkit-transition: all 0.3s ease-in-out 0s;
	   -moz-transition: all 0.3s ease-in-out 0s;
		-ms-transition: all 0.3s ease-in-out 0s;
		 -o-transition: all 0.3s ease-in-out 0s;
			transition: all 0.3s ease-in-out 0s;
}

.file {
color: white !important;
text-decoration:underline;
}

.descriptiontext
{
padding-bottom:70px;
padding-top:70px;
}


.hidden
{
display:none;
}





.logotri 
{
background:url("../img/logofull1.svg") no-repeat;
background-position: center center;
width:100%;
height:900px;
max-height:100%;
background-size: contain;
text-align:center;
}



/* ------------------------------------------------------------------
Preloader
------------------------------------------------------------------- */

.page-loader {
	position: fixed;
	background: #fff;
	bottom: 0;
	right: 0;
	left: 0;
	top: 0;
	z-index: 9998;
}

.loader {
	position: absolute;
	border-left: 2px solid #b2b2b2;
	border-top: 2px solid rgba(245, 245, 245, 0.8);
	border-right: 2px solid rgba(245, 245, 245, 0.8);
	border-bottom: 2px solid rgba(245, 245, 245, 0.8);
	height: 46px;
	width: 46px;
	left: 50%;
	top: 50%;
	margin: -23px 0 0 -23px;
	text-indent: -9999em;
	font-size: 10px;
	z-index: 9999;
	-webkit-animation: load 0.8s infinite linear;
	   -moz-animation: load 0.8s infinite linear;
		 ms-animation: load 0.8s infinite linear;
		  o-animation: load 0.8s infinite linear;
			animation: load 0.8s infinite linear;
}

.loader,
.loader:after {
	border-radius: 50%;
	width: 46px;
	height: 46px;
}

@-webkit-keyframes load {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes load {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}








.empty 
{
background: rgba(0,0,0,0.3);
transition: all 1s;
}

.empty:hover
{
opacity: 0; 
}

*{
  margin:0; 
  padding:0;
}

.marginleft{
position:absolute !important;
margin-left:15.57% !important;
}
.marginright{
position:absolute !important;
margin-left:50.3% !important;
}



.categories{
  overflow:hidden;
  width:40%;
  margin-top:7%;
}
.clr:after{
  content:"";
  display:block;
  clear:both;
}
.categories li{
  position:relative;
  list-style-type:none;
  width:27.85714285714286%; /* = (100-2.5) / 3.5 */
  padding-bottom: 32.16760145166612%; /* =  width /0.866 */
  float:left;
  overflow:hidden;
  visibility:hidden;
  -webkit-transform: rotate(-60deg) skewY(30deg);
  -ms-transform: rotate(-60deg) skewY(30deg);
  transform: rotate(-60deg) skewY(30deg);
}
.categories li:nth-child(3n+2){
  margin:0 1%;
}

.categories li:nth-child(6n+4){
  margin-left:0.45%;
}
.categories li:nth-child(6n+4), .categories li:nth-child(6n+5), .categories li:nth-child(6n+6) {
	margin-top: -7.3%;
  margin-bottom: -7.3%;
  
  -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
  -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
  transform: translateX(50%) rotate(-60deg) skewY(30deg);
}
.categories li:nth-child(6n+4):last-child, .categories li:nth-child(6n+5):last-child, .categories li:nth-child(6n+6):last-child{
  margin-bottom:0%;
}
.categories li *{
  position:absolute;
  visibility:visible;
}


.categories li {
z-index:9 !important;
opacity: 0.1; 
}



.hover-effect {
opacity: 1; 
transition: all 1s;
background: rgba(0,0,0,1);
}

.categories li:hover .hover-effect{
background: rgba(0,100,155,1);
}

.categories li img{
  left:-100%; right:-100%;
  width: auto; height:100%;
  margin:0 auto; 
  max-width: 200%; 
  opacity: 0.55;
}






.categories li > div{
  width:100%;
  height:100%;
  text-align:center;
  color:#fff;
  overflow:hidden;
  
  -webkit-transform: skewY(-30deg) rotate(60deg);
  -ms-transform: skewY(-30deg) rotate(60deg);
  transform: skewY(-30deg) rotate(60deg);
  -webkit-backface-visibility:hidden;
 
}

.categories div h1, .categories div p{
  background-color: rgba(0, 50, 125, 0.8);

  -webkit-transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
  -ms-transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
  transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
}