@charset "UTF-8";
/* VMOTARD STYLE SHEET*/
									/*CSS RESET*/
									/* http://meyerweb.com/eric/tools/css/reset/ 
									   v2.0 | 20110126
									   License: none (public domain)
									*/									
									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, embed, 
									figure, figcaption, footer, header, hgroup, 
									menu, nav, output, ruby, section, summary,
									time, mark, audio, video {
										margin: 0;
										padding: 0;
										border: 0;
										font-size: 100%;
										font: inherit;
										vertical-align: baseline;
									}
									/* HTML5 display-role reset for older browsers */
									article, aside, details, figcaption, figure, 
									footer, header, hgroup, menu, nav, section {
										display: block;
									}
									body {
										line-height: 1;
									}
									ol, ul {
										list-style: none;
									}
									blockquote, q {
										quotes: none;
									}
									blockquote:before, blockquote:after,
									q:before, q:after {
										content: '';
										content: none;
									}
									table {
										border-collapse: collapse;
										border-spacing: 0;
									}
									/*END CSS RESET*/

/*//////////////////////////  LAYOUT   ////////////////////////*/
html{
	font-size:16px;
	font-family: 'roboto', sans-serif;
	background-color:#F8f8f8;
	height:100%;
	width:100%;
}
body{
	height:100%;
}
body *{
	box-sizing: border-box;
}
.container{
	width:80%;
	margin:auto;
}
.col2{
	width:50%;
	padding:4em 8%;
	float:left;
}
.col3{
	width:33.33%;
	padding:4em 8%;
	float:left;
}
.col3.right{
	padding:0 8% 0 4%;
}
.col3.left{
	padding:0 4% 0 8%;
}
.col4{
	width:25%;
	padding:4em 8%;
	float:left;
}
.col75{
	width:66.666%;
}
.col100{
	width:100%;
	float:left;
}
.right, .sidebar.right{
	float:right;
	text-align:left;
}
.left, .sidebar.left{
	float:left;
	text-align:right;
}
/*//////////////////////////  TYPE   ////////////////////////*/
font-white{
	color:white;
}
h1, h2, h3{
	font-family: 'roboto', sans-serif;
	font-weight:600;
	letter-spacing:1px;
	line-height:1.2em;
	text-transform:none;
	color:#ff495c;
	font-size:1em;
	line-height:1.25;
}
.hb{ /*header titles*/
    font-size:2.5em;
	color:#45495a;
	padding-bottom:1em;
	font-weight:600;		
}

.text-gradient{
		background: #ED4848;
background: -webkit-linear-gradient(135deg,rgba(237, 72, 72, 1) 0%, rgba(72, 66, 209, 1) 100%);
background: -moz-linear-gradient(135deg,rgba(237, 72, 72, 1) 0%, rgba(72, 66, 209, 1) 100%);
background: linear-gradient(135deg,rgba(237, 72, 72, 1) 0%, rgba(72, 66, 209, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr="#ED4848",
  endColorstr="#4842D1",
  GradientType=0
);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hc{/*titles in profile page*/
	color:#45495a;
	font-size:2.5em;
	padding-bottom:.5em;
}
.hd{ /*footer*/
	font-weight:600;
	font-size:1.5em;
	padding-bottom:0;
	color:#565b6f;
	}
.he{/*subtitle cover*/
	color:#45495a;
	font-weight:700;
	font-size:2em;
	letter-spacing:1px;
	padding-bottom:0.5em;
}
.bold{ /*abilities list*/
	font-weight:700;
	padding-right:1em;
	color:#a2a5b2;
	}
p, ul li{
	font-family: 'roboto', sans-serif;
	font-weight:500;
	letter-spacing:0.08em;
	line-height:1.4em;
	font-size:1.15em;
	color:#45495A;
}
ul li{
	padding-top:.55em;
}
ul li.sub-li{
	font-size:.85em;
	padding-top:.25em;
	font-style:italic;
}
/*//////////////////////////  LINKS   ////////////////////////*/
a{
	text-decoration:none;
	/*color:#ff495c;*/
	color:#ed4848;
	font-weight:500;
	border-bottom: solid 3px #ed4848;
	padding:0.45em 0.25em 0.25em 0.25em;
	-webkit-transition: background 1s, padding 2s; /* For Safari 3.1 to 6.0 */
    transition: background 1s, padding 2s;
	letter-spacing:1px;
    line-height: 2;
}
a:hover{
	padding:0.45em 2em 0.25em 2em;
	border:solid 3px #ed4848;
	color:#ed4848;
}
a.smoothScroll:hover, a.smoothScroll{
	padding:0;
	border:0;
}
a:active{
	background-color:#ed4848;
}
a.a1{
	font-size:2em;
	text-align:center;
	line-height:2;
}
a.a1.blue{ /*expertise behance*/
	color:#412d91;
	border-color:#412d91;
}
a.button{
	border:solid 2px #ed4848;
	color:#ed4848;
	padding:0.45em 2em 0.25em 2em;
}
a.button:hover{
	background-color:#ed4848;
	color:#31364c;
	padding:0.45em 4em 0.25em 4em;
}
a.button.button-filled{
	background-color:#ff495c;
	color:#e6e8ed;
	letter-spacing:2px;
}
a.button.button-filled:hover{
	color:#7b818e;
	background-color:#45495A;
	border:solid 2px #45495A;
}
a.button.button-filled:active{
	background-color:#E54253;
	border:solid 2px #E54253;
	color:#e6e8ed;
}
#intro a, .a2{
	font-size:1.2em;
	letter-spacing: 1px;
}
/************************ scroll arrow ******************************/
@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
a.arrow {
border:0;
}
a.arrow:hover {
padding:0 0 0 20%;
}
.arrow {
  position: absolute;
  bottom: 2em;
	left:0;
  font-size: 18px;
padding-left:20%;
}
.arrow img {
	width:30px;
	margin-right:20px;
}
.bounce {
  -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}
.fade {
  opacity:0;
  transition: 1s all ease-out;
}
/**** button return to top ****/
#top-btn {
    position: fixed;
    bottom: 60px;
    right: 45px;
	width: 50px;
    height: 50px;
	border:none;
    display: block;
    display: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
	box-shadow: 0 0 2px rgba(204, 58, 74, .25);
	z-index:99;	
		background: #DD445D;
	background: -webkit-linear-gradient(135deg,rgba(221, 68, 93, 1) 0%, rgba(165, 70, 146, 1) 100%);
	background: -moz-linear-gradient(135deg,rgba(221, 68, 93, 1) 0%, rgba(165, 70, 146, 1) 100%);
	background: linear-gradient(135deg,rgba(221, 68, 93, 1) 0%, rgba(165, 70, 146, 1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(
	  startColorstr="#DD445D",
	  endColorstr="#A54692",
	  GradientType=0
	);
}
#top-btn i{
	transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
	border: solid white;
  border-width: 0 4px 4px 0;
  display: inline-block;
  padding: 5px;
	margin-top:7px;
	}
#top-btn:hover {
		background-color:initial;
	filter:brightness(80%);
}
/*//////////////////////////  COLORS + BACKGROUNDS + GRADIENTS   ////////////////////////*/
.color-coral{
	color:#ed4848;
}
.color-text-grey-xlight{ /*footer only*/
	color:#585f77;
}
.color-text-grey-light{ /*portfolio titles*/
	color:#565b6f;
}
.color-text-grey{
	/*color:#45495a;*/
}
.color-text-coral-light{
	/*color:#ff536f;*/
}

.color-text-blue-dark{ /*over gradient secondary coral*/
	color:#412d91;
}
.color-text-grey{
	color:#45495a;
}
.background-white{
	background-color:#fff;
}
.background-bluegrey{/*contact section*/
	background-color:#323541;
}
.gradient-main-coralblue{
background: #ED4848;
background: -webkit-linear-gradient(135deg,rgba(237, 72, 72, 1) 0%, rgba(72, 66, 209, 1) 100%);
background: -moz-linear-gradient(135deg,rgba(237, 72, 72, 1) 0%, rgba(72, 66, 209, 1) 100%);
background: linear-gradient(135deg,rgba(237, 72, 72, 1) 0%, rgba(72, 66, 209, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr="#ED4848",
  endColorstr="#4842D1",
  GradientType=0
);
}
.gradient-secondary-coral{
	background: #A54692;
	background: -webkit-linear-gradient(135deg,rgba(165, 70, 146, 1) 0%, rgba(237, 72, 72, 1) 100%);
	background: -moz-linear-gradient(135deg,rgba(165, 70, 146, 1) 0%, rgba(237, 72, 72, 1) 100%);
	background: linear-gradient(135deg,rgba(165, 70, 146, 1) 0%, rgba(237, 72, 72, 1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(
	  startColorstr="#A54692",
	  endColorstr="#ED4848",
	  GradientType=0
	);
}
.gradient-secondary-blue{
background: #3D3DC1;
background: -webkit-linear-gradient(135deg,rgba(61, 61, 193, 1) 0%, rgba(165, 70, 146, 1) 100%);
background: -moz-linear-gradient(135deg,rgba(61, 61, 193, 1) 0%, rgba(165, 70, 146, 1) 100%);
background: linear-gradient(135deg,rgba(61, 61, 193, 1) 0%, rgba(165, 70, 146, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr="#3D3DC1",
  endColorstr="#A54692",
  GradientType=0
);
}
.background-grey95 {/*for portfolio pages*/
  background-color: #2d2d2c;
}
.background-black {/*for portfolio section*/
  background-color: #1D1D1B;
}
/*//////////////////////////HEADER SECTION////////////////////////*/
#header{
	height:70px;
	box-shadow: 0 2px 5px rgba(69,73,90, 0.3);
	position:fixed;
	width:100%;
    Top:0;
    z-index:1;
	}
#header img{
	margin-left:5%;
	float:left;
	height:50px;
	margin-top:10px;
	margin-bottom:10px;
	}
/*NAV*/
.topnav {
  overflow: hidden;
	float:right;
}
.topnav a {
  float: left;
  display: block;
	color:white;
	font-size:13px;
	padding:22px 20px;
	font-weight:500;
	border:none;
	text-align:center;
	letter-spacing:1px;
	text-transform:uppercase;	
}
.topnav a:hover {
  	color:#ff495c;
	background-color:white;
}
.topnav .icon {
  display: none;
}
@media screen and (max-width: 600px) {
  .topnav a {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
	font-size:25px;
	height:70px;
	padding:12px 20px;
  }
 .topnav.responsive a.icon {
	 padding:25px 20px;
	   	color:#ff495c;
	background-color:white;
  }
.topnav.responsive .icon {
   position: absolute;
   right: 0;
   top: 0;
  }
 .topnav.responsive a {
    float: none;
    display: block;
    text-align: center;
	padding:32px 0;
	border-top:solid 1px black;
  }
.topnav.responsive{
	width:100%;
	background-color:#1E212E;
	}
 .topnav.responsive a:hover {
    border:none;
	border-top:solid 1px #31364c;
	background-color:white;
  }
 .topnav.responsive a.language {
	 background-color:black;
  }
 .topnav.responsive a.language:hover {
	 background-color:white;
  }	
}
/*///////////////INTRO SECTION/////////////////////*/
#intro{
	height:auto;
	padding:25vh 20% 25vh 20%;
	background-color:#1E212E;
	position:relative;
}

#intro .hb{ /*header titles*/
    font-size:3.5em;
	line-height:1.25em;
	
}
#intro .he{
	font-size:2em;
}	
#intro p{
	font-size:1.5em;
}
#expertise {
	padding:2em 20%;
}
#expertise p{
	color:white;
    text-align:left;
	font-size:1.25em;
}
/*/////////////////////////////PORFOLIO SECTION//////////////////////////////*/
/*portfolio/sidebar*/
.sidebar{
	width:33.33%;
	background-color:#fff;
	padding:3em 4%;
	text-align:right;
	margin:150px 0;
}
.sidebar:hover{
	transform: scale(1.02);
    transition: all 1s;
}
.cover{
    height:700px;
}
.cover.sm{ /* cover in the portfolio pages*/
    height:400px;
    margin-top:70px;
    position:relative;
}
.covertitle {
    width: 100%;
    height:200px;
    text-align: left;
    padding: 0 4%;
    position:absolute;    
    background: rgb(0,0,0);
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 95%);
    bottom:0;
    }
.covertitle h2{
    padding:0 0 1em 0;
    bottom:0;
    position:absolute;
    color:white;
}
/*portfolio/projects/projects backgrounds - home*/
#ekbit{background:url(img/eckbit-cover2.jpg) no-repeat center right;}
#reltora{background:url(img/reltora/reltoracover.jpg) no-repeat left center;}
#homeinspector{	background:url(img/homeinspectorbg.jpg) no-repeat center center;}
#eset{background:url(img/esetcover.jpg) no-repeat center left;}
#molino{background:url(img/molinobg.jpg) no-repeat left center;}
#bieres{background:url(img/bieresbg.jpg) no-repeat left top;}
#dc{background:url(img/dc-cover.jpg) no-repeat right top;}
#mechatronics{background:url(img/mechatronicsbg-left.jpg) no-repeat left top;}
/*portfolio/projects/projects backgrounds     positioning for all background img*/
#ekbit, #homeinspector, #bieres, #eset, #molino, #cefan, #mechatronics, #reltora, #dc{
	-webkit-background-size: cover;	-moz-background-size: cover;-o-background-size: cover;background-size: cover;
	clear:both;
	/*height:700px;*/
}
.projectcontent{ /* show on click section */
	margin:0;
	padding:0;
	width:100%;
	clear:both;
    z-index:2;
}
.project-img{
   position:relative;
}
.project-view.sm, .project-view.sm .col3, .project-view.sm .project-img{
	height:65vh;
}
.project-view, .project-img{
	height:70vh;
}
.project-view .col3{
	padding-top:4em;
	padding-bottom:4em;
	display: flex;
  	align-items: center;
	flex-direction:column;
	height:70vh;
	z-index:2;
}
.project-view .col3.left p, .project-view .col3.left h3, .project-view .col3.left h4{
	text-align:right;
	width:100%;
}
.project-view .col3 p, .project-view .col3 h4, .project-view .col3 h3{
	text-align:left;
	width:100%;
}
.project-view .dark-font p{/*dark fonts for light background*/
	color:#1E212E;
}
.projectcontent h3{ /* portfolio fonts */
	color:#b6b8ba;
    font-size:1.5em;
    font-weight:400;
    letter-spacing:1.5px;
	padding-bottom:1em;
}
.projectcontent h4{
	/*padding-top:10vh;*/
	color:#b6b8ba;
	font-weight:500;
	font-size:.95em;
	letter-spacing:2px;
}
.projectcontent p.work{
	font-size:0.85em;
	font-weight:400;
	color:#b6b8ba;
	padding-left:0;
	margin-bottom:0;
	padding-bottom:0.25em;
}
.projectcontent p{
	color:#2f2d2d;
	margin:auto;
	text-align:left;
	padding:0 0 1em 0;
	color:#fff;
	font-size:1em;
	line-height:1.35em;
}
.project-line{
	padding:2em 12%;
}
.project-line p{
    color:#45495A;
    text-align:center;
    margin:0;
    padding:0;
}
.project-line a{
    text-align:center;
}
/**** PORTFOLIO IMAGES *****/
.project-view.last{
    position:relative;
}
.collapse{
	width:20%;
	margin:0 40%;
    height:auto;
	text-align:center;
	padding:2em 4%;
	background-color:white;
    position:absolute;
    bottom:0;
}
/**** dc heroes and villains ****/
#casestudylink{
    margin-top:25px;
}
.projectlogo img{
    position:absolute;
    bottom:1em;
    width:12em;
    right:0;
}
.projectlogo.logoleft img{
    left:0;
}
.background-dark-dc{
	background-color:#2F2F38;
}
.background-light-dc{
	background-color:#7B7B88;
}
#dccontent .project-line{
	background: rgb(29,48,90);
    background: linear-gradient(135deg, rgba(29,48,90,1) 0%, rgba(15,19,30,1) 100%);
    text-align:center;
}
#dccontent .project-line h3{
    color:#506186;
    font-size:1.5em;
}
#dccontent .project-line a{
    margin:auto;
    display:inline-block;
    margin-top:.5em
}
#dc-view1{
	background:url(img/dc-01.jpg) no-repeat center center;
	-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;background-size:cover;
}
#dc-view2{
	background:url(img/dc-02.jpg) no-repeat center right;
	-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;background-size:cover;
}
#dc-view3a{
	background:url(img/dc-03a.jpg) no-repeat center center;
			-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;background-size:cover;
}
#dc-view3b{
	background:url(img/dc-03b.jpg) no-repeat center center;
			-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;background-size:cover;
}
#dc-view3{
	background:url(img/dc-04.jpg) no-repeat center center;
	-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;background-size:cover;
}
#dc-view4{
	background:url(img/dc-05.jpg) no-repeat center right;
	-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;background-size:cover;
}
#dc-view5{
	background:url(img/dc-06.jpg) no-repeat center center;
	-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;background-size:cover;
}
#dc-view7a{
		background:url(img/dc-07a.jpg) no-repeat center center;
	-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;background-size:cover;
}
#dc-view7b{
		background:url(img/dc-07b.jpg) no-repeat center center;
	-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;background-size:cover;
}
#dc-view8{
	background:url(img/dc-08.jpg) no-repeat center center;
	-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;background-size:cover;
}
/**** home inspector ****/
#home-view1{
	background:url(img/homeinspector7.jpg) no-repeat center center;
	-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;background-size:cover;}
#home-view2{
	background:url(img/homeinspector15.jpg) no-repeat center center;
	background-size: 75% auto;
	background-color:white;}
#home-view3a{
	background:url(img/homeinspector11.jpg) no-repeat center top;
			-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;background-size:cover;
}
#home-view3b{
	background:url(img/homeinspector2.jpg) no-repeat center center;
			-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;background-size:cover;
}
#home-view4{background:url(img/homeinspector16.jpg) no-repeat top right;
	-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;background-size:cover;
}
/**** ekbit ****/
#ekbit-view1{
	background:url(img/ekbit-logo1.png) no-repeat center center;
	background-size: 50% auto;
	background-color:white;
}
#ekbit-view2{
	background:url(img/ekbit-logo2.png) no-repeat center center;
	background-size: 50% auto;
	background-color:#3C3C3F;
}

#ekbit-view3{
	background:url(img/ekbit-3.png) no-repeat center center;
	background-size: 70% auto;
	background-color:#F7F7F7;
	background-color:white;
}
#ekbit-view4a{
	background:url(img/ekbit-4a.png) no-repeat center center;
	background-size: 60% auto;
	background-color:#2A2E33;
}
#ekbit-view4b{
	background:url(img/ekbit-4b.png) no-repeat center center;
	background-size: 60% auto;
	background-color:#3C3C3F;
}
#ekbit-view5{
	background:url(img/ekbit-5.png) no-repeat center center;
	background-size: 70% auto;
	background-color:white;
}
#ekbit-view6{
	background:url(img/ekbit-7.jpg) no-repeat center right;
	-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;background-size:cover;
}
/**** reltora ****/
.background-dark-reltora{
	background-color:#2F2F38;
}
.background-light-reltora{
	background-color:#7B7B88;
}
#reltora-view1{
	background:url(img/reltora/reltora-1.png) no-repeat center center;
	-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;background-size:cover;
}
#reltora-view2{/*reltora logo*/
	background:url(img/reltora/reltora-logo.png) no-repeat center center;
	background-size: 40% auto;
	background-color:#FC9B32;/*reltora-orange*/
}
#reltora-view3{/*reltora logo explanation*/
	background:url(img/reltora/reltora-logo2.png) no-repeat center center;
	background-size: 35% auto;
	background-color:#434251;
}
#reltora-view4{
	background:url(img/reltora/reltora-4.jpg) no-repeat center center;
	-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;background-size:cover;
}
#reltora-view5{/* icons */
	background:url(img/reltora/reltora-5.png) no-repeat center center;
	background-size: auto 80%;
	background-color:white;
}
#reltora-view6{
	background:url(img/reltora/reltora-6.jpg) no-repeat center center;
	-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;background-size:cover;
}
#reltora-view7a{
		background:url(img/reltora/reltora-7a.png) no-repeat center center;
	-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;background-size:cover;
}
#reltora-view7b{
		background:url(img/reltora/reltora-7b.png) no-repeat center center;
	-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;background-size:cover;
}
#reltora-view8{
	background:url(img/reltora/reltora-8.jpg) no-repeat center center;
	-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;background-size:cover;
}
/**** ESET ****/
#esetcontent .project-line{
	background-color:#008992;
}
#esetcontent .project-line p{
    color:white;
    font-size:1.15em;
}
#eset-view1{
	background:url(img/eset1.jpg) no-repeat center center;
	-webkit-background-size: cover;	-moz-background-size: cover;-o-background-size: cover;background-size: cover;
	background-color:#f3f3f3;
}
#eset-view2{/*molino logo*/
	background:url(img/eset2.jpg) no-repeat center right;
-webkit-background-size: cover;	-moz-background-size: cover;-o-background-size: cover;background-size: cover;
	background-color:#ac9d7a;
}
#eset-view3{
	background:url(img/eset3.jpg) no-repeat center center;
-webkit-background-size: cover;	-moz-background-size: cover;-o-background-size: cover;background-size: cover;
	background-color:#f3f3f3;
}
#eset-view4{
	background:url(img/eset4.jpg) no-repeat center center;
    -webkit-background-size: cover;	-moz-background-size: cover;-o-background-size: cover;background-size: cover;
	background-color:#f3f3f3;
}
/***** mechatronics ****/
#mechatronics-view1{
	background:url(img/mechatronics-1.jpg) no-repeat left center;
	background-size: auto 100%;
	background-color:#f3f3f3;
}
#mechatronics-view2{
	background:url(img/mechatronics-11.jpg) no-repeat center center;
	-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;background-size:cover;
}
#mechatronics-view3{
	background:url(img/mechatronics-4.jpg) no-repeat center center;
	background-size: auto 100%;
	background-color:#f3f3f3;
}
#mechatronics-view4{
	background:url(img/mechatronics-2a.jpg) no-repeat center center;
	-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;background-size:cover;
}
#mechatronics-view5{
	background:url(img/mechatronics-6.jpg) no-repeat center center;
	background-size: auto 100%;
	background-color:#f3f3f3;
}
#mechatronics-view6{
	background:url(img/mechatronics-7.jpg) no-repeat center center;
	-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;background-size:cover;
}
#mechatronics-view7{
	background:url(img/mechatronics-5.jpg) no-repeat right center;
	background-size: auto 100%;
	background-color:#f3f3f3;
}
#mechatronics-view8{
	background:url(img/mechatronics-3.jpg) no-repeat center center;
	-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;background-size:cover;
}
#mechatronics-view9{
	background:url(img/mechatronics-8.jpg) no-repeat center center;
		background-size: auto 100%;
	background-color:#f3f3f3;
}
#mechatronics-view10{
	background:url(img/mechatronics-2.jpg) no-repeat center center;
	-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;background-size:cover;
}
/*////////////////////////// Next Project ///////////////////////*/
.nextproject .col100{
	text-align:center;
	padding:20em 0;
}
.nextproject a{
    font-size:2em;
}
#nexthomeinspector{
    background: linear-gradient(rgba(0,0,1,.65), rgba(0,0,1,.65)), url(img/homeinspector11.jpg)no-repeat center center;
	-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;background-size:cover;
}
#nextreltora{
    background: linear-gradient(rgba(0,0,1,.65), rgba(0,0,1,.65)), url(img/reltora/reltoracover.jpg)no-repeat center center;
	-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
}
#nexteset{
    background: linear-gradient(rgba(0,0,1,.65), rgba(0,0,1,.65)), url(img/esetcover.jpg)no-repeat center center;
	-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
}
#nextekbit{
    background: linear-gradient(rgba(0,0,1,.65), rgba(0,0,1,.65)), url(img/eckbit-cover2.jpg)no-repeat center center;
	-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
}
#nextmechatronics{
    background: linear-gradient(rgba(0,0,1,.65), rgba(0,0,1,.65)), url(img/mechatronicsbg-left.jpg)no-repeat center center;
	-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
}
#nextdc{
    background: linear-gradient(rgba(0,0,1,.65), rgba(0,0,1,.65)), url(img/dc-cover.jpg)no-repeat center center;
	-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
}
/*////////////////////////// Links ///////////////////////*/
#links .col2, #links .col100{
	text-align:center;
	padding:6em 0;
}
#links .col100{/*about page*/
	padding:6em 0;
}
#links .col100 h2{/*about page*/
	color:#412d91;
}
#links .col2:hover, #links .col100:hover{
	transform: scale(1.02);
    transition: all 1s;
}
#links a img{
	padding: 0 .5em 0 1.15em;
}
/*////////////////////////// ABOUT ME PAGE ///////////////////////*/
.about-section{
	width:100%;
	clear:both;
	overflow:hidden;
}
.about-section .sidebar{
	background-color:#31364C;
}
.about-section .sidebar h2.hb{
	color:white;
	padding:0;
}
.about-section .sidebar.left{
/*	margin:0;
	position:absolute;
	top:10em;*/
}
/*/////////////////////////// info /////////////////////*/
#info{
	position:relative;
}
.info-item{
	padding:2em 25% 1em 25%;
}
.info-item:last-of-type{
	padding-bottom:8em;
}
#info p, .abilitieslist{
    padding:0 15% 1em 10%;
}
.info-item h4{
	border-top:1px dotted #b6b8ba;
	padding:3em 0 1em 0;
	font-weight:400;
	font-size:1em;
	letter-spacing:1px;
	color:#FF495C;
}
.info-item h3{
    padding:0 15% 1em 10%;
}
.info-item h4.noborder{
	border-top:0 dotted #b6b8ba;
	padding-top:1.25em;
}
#info img{
    padding:1em 0 3em 0;
    width:34%;
    margin:0 33%;
}
#info .col2{
     padding: 0 5% 8em 0;
}
#info ul li{
     padding-bottom: 1em;
}
/*///////////////////////////CONTACT/////////////////////*/
#contact{
	padding:5em 0;
	text-align:center;
	clear:both;
}
#contact:hover{
	transform: scale(1.02);
    transition: all 1s;
}
#contact h2, #contact h3{
	color:#565b6f;
	font-style:normal;
	text-transform: none;
	font-size:2.5em;
	padding-bottom:.5em;
	letter-spacing:2px;
}
#contact h3{
	font-size:1.25em;
	padding-bottom:3.5em;
	font-weight:500;
}
#contact a{	
	font-size:2em;
	letter-spacing:4px;
	border-bottom:0px;
	padding:.25em 1em;
	border:solid 3px #ff495c;
}
#contact a:hover{
	color:#31364C;
	text-shadow:1px 1px 1px rgba(204,68,74,0.5);
	padding:.25em 1.75em;
	background-color:#ff495c;
}
#contact a:active{
	color:#1E212E;
	background-color:#BF3745;
}
#contact.gradient-coral a{
	color:#e6e8ed;
	border-color:#e6e8ed;
}
#contact.gradient-coral a:hover{
	background-color:#45495A;
	border-color:#45495A;
}
/*///////////////////////////////FOOTER SECTION//////////////////////*/
footer{
	clear:both;
	display:inline-block;
	width:100%;
	background: #191C26;
background: -webkit-linear-gradient(0deg,rgba(25, 28, 38, 1) 65%, rgba(23, 25, 36, 1) 100%);
background: -moz-linear-gradient(0deg,rgba(25, 28, 38, 1) 65%, rgba(23, 25, 36, 1) 100%);
background: linear-gradient(0deg,rgba(25, 28, 38, 1) 65%, rgba(23, 25, 36, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr="#191C26",
  endColorstr="#171924",
  GradientType=0
);
}
footer .col2{
	padding: 1em 4% 0 4%;
}
footer .col2 ul li a{
	border-bottom:solid 2px #565b6f;
	font-size:.85em;
	color:#565b6f;
}
footer .col2 ul li a:hover{
	background-color:#ff495c;
	border:solid 2px #ff495c;
	color:#fff;
}
footer ul.socialmedia{
	float:left;
	padding-top:.5em;
}
footer ul.socialmedia li{
	float:left;
}
footer  ul.socialmedia li a{
	border-bottom:0;
	padding:0 .5em 0 0;
}
footer ul.socialmedia li a:hover, footer.dark ul.socialmedia li a:hover {
	border:none;
	background-color:initial;
	filter:brightness(80%);
}
p.copyright{
	position:relative;
	bottom:1em;
	right:3em;
	font-size:0.85em;
	float:right;
	padding-top:0;
	color:#565b6f;
	clear:both;
}
/*******************************MEDIA QUERIES*******************/
@media only screen and (max-width: 1400px) {
	#info p{
	padding-left:0;
}
.project-view .col3,.project-view .col3.first{
        width:28%;
    }
    .project .sidebar{
        width:40%;
    }
#info img{
	height:auto;
	width:50%;
	margin:0 25%;
	padding:1em 0 3em 0;
}
.info-item h3{
	padding:0 0 1em 0;
}
#dclogo{
    bottom: 25px;
}
}
/******************************* Mobile Version *******************/
@media only screen and (max-width: 1300px) {
.col2, .col3, .col4, .col75, .col00, .col3.right, .col3.left{
	width:100%;
	padding:0;
    height:auto;
    padding:2em 0;    
    float:none;
    position:relative;
    position:static;!Important
}
p, ul li {
  letter-spacing: 0.08em;
  line-height: 1.5em;
  font-size: 1em;
}	
	
	
/** intro **/
#intro .he {
  font-size: 1.25em;
}
#intro .hb {
    font-size: 2em;
  line-height: 1.25em;
	padding-bottom:1em;
}
#intro p {
    font-size: 1em;
  line-height: 1.5em;
}
a.arrow.color-coral	{
    display:none;
}
#intro, #intro.intro-sm{
        padding:4em 8%;
        height:auto;
        margin-top:70px;
    }
.info-item{
        padding:2em 8%;
    }  
    h3.hc{
        font-size:2em;
    }	
/** Layout - Project **/
    .covertitle{
        padding-left:10%;
    }
.sidebar, .sidebar.left, .sidebar.right {
    width: 100%;
    height:200px;
    text-align: left;
    padding: 2em 8%;
    margin-bottom: 500px;
    margin-top:0;
    background: rgb(0,0,0);
    background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 95%);
    float:none;
    position:absolute; 
    }
.project-view .col3.first{
   width:100%;
    top: 0;
    height:auto;
    margin-bottom: 0;
    padding:2em 0;
}
.project-img{
   height:70vh;!important
    position:static;
}
.collapse{
    width:50%;
    margin:0 25%;
    }   
.project-content{
    width:100%;
    position:static;
    }
.project-view{
    /*height:70hv;
    width:100%;*/
    height:auto;
    }
.project-view.sm, .project-view.sm .col3{
        height:auto;
    }
.cover{
    height:700px;
    position:static;
    }
.project{
        position:relative;
    }    
.col2{
    float:left;
    width:100%;
}
/** fonts **/  
.hb {
    font-size: 2em;
    color: white;
    padding-bottom: 0;
    font-weight: 600;
}
.project-view .col3.left p, .project-view .col3.right p, .project-view .col3 h3, .project-view .col3.left h4, .project-view .col3.right h4, .project-view .col3.first p, .project-view h3, .project-view h4, .project-view p, .project-view p.work, .project-view .col3.left h3 {
   text-align: left;
    padding:0;
}
.project-view p.work{
        padding-bottom:1em;
        margin-top:0;
    }
.project-view .col3 h3{
    font-size:1.5em;
    padding-bottom:1em;
}    
#contact a{
        font-size:1em;
    }
/** Project Images **/
/*portfolio/Covers*/
#ekbit{background:url(img/mobilecover_ekbit.jpg) no-repeat bottom center;}
#reltora{background:url(img/mobilecover_reltora.jpg) no-repeat center center;}
#homeinspector{	background:url(img/mobilecover_homeinspector.jpg) no-repeat center center;}
#dc{background:url(img/mobilecover_dc.jpg) no-repeat center center;}
#mechatronics{background:url(img/mechatronicsbg-left.jpg) no-repeat left center;}
/*portfolio/projects/projects backgrounds     positioning for all background img*/
#ekbit, #homeinspector, #bieres, #eset, #molino, #cefan, #mechatronics, #reltora, #dc{
	-webkit-background-size: cover;	-moz-background-size: cover;-o-background-size: cover;background-size: cover;
	clear:both;
    height:700px;}   
#dc-view2{
	background:url(img/dc-02.jpg) no-repeat center right;
	-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;background-size:cover;
}
#dc-view3{
	background:url(img/dc-04.jpg) no-repeat bottom right;
	-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;background-size:cover;
}
#dc-view4{
	background:url(img/dc-05.jpg) no-repeat center right;
	-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;background-size:cover;
}

#dc-view8{
	background:url(img/dc-08.jpg) no-repeat center left;
	-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;background-size:cover;
}
/**** home inspector ****/
#home-view2{
	background:url(img/homeinspector15.jpg) no-repeat center center;
	background-size: 90% auto;
	background-color:white;} 
/**** ekbit ****/
#ekbit-view1{
	background:url(img/ekbit-logo1.png) no-repeat center center;
	background-size: 90% auto;
	background-color:white;
}
#ekbit-view2{
	background:url(img/ekbit-logo2.png) no-repeat center center;
	background-size: 90% auto;
	background-color:#3C3C3F;
}
#ekbit-view3{
	background:url(img/ekbit-3.png) no-repeat center center;
	background-size: 90% auto;
	background-color:#F7F7F7;
	background-color:white;
}
#ekbit-view5{
	background:url(img/ekbit-5.png) no-repeat center center;
	background-size: 90% auto;
	background-color:white;
}
#ekbit-view6{
	background:url(img/ekbit-7.jpg) no-repeat center right;
	-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;background-size:cover;
}
/**** reltora ****/
#reltora-view1{
	background:url(img/reltora/reltora-1.png) no-repeat center right;
	-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;background-size:cover;
}
#reltora-view2{/*reltora logo*/
	background:url(img/reltora/reltora-logo.png) no-repeat center center;
	background-size: 75% auto;
	background-color:#FC9B32;/*reltora-orange*/
}
#reltora-view3{/*reltora logo explanation*/
	background:url(img/reltora/reltora-logo2.png) no-repeat center center;
	background-size: 80% auto;
	background-color:#434251;
}
#reltora-view5{/* icons */
	background:url(img/reltora/reltora-5.png) no-repeat center center;
	background-size: 95% auto;
	background-color:white;
}
#reltora-view6{
	background:url(img/reltora/reltora-6.jpg) no-repeat center center;
	-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;background-size:cover;
}
#reltora-view7a{
		background:url(img/reltora/reltora-7a.png) no-repeat center center;
	-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;background-size:cover;
}
#reltora-view7b{
		background:url(img/reltora/reltora-7b.png) no-repeat center center;
	-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;background-size:cover;
}
#reltora-view8{
	background:url(img/reltora/reltora-8.jpg) no-repeat center center;
	-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;background-size:cover;
}
/***** mechatronics ****/
#mechatronics-view1{
	background:url(img/mechatronics-1.jpg) no-repeat left center;
	background-size: auto 100%;
	background-color:#f3f3f3;
}
#mechatronics-view2{
	background:url(img/mechatronics-11.jpg) no-repeat center center;
	-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;background-size:cover;
}
#mechatronics-view3{
	background:url(img/mechatronics-4.jpg) no-repeat center center;
	background-size: auto 100%;
	background-color:#f3f3f3;
}
#mechatronics-view5{
	background:url(img/mechatronics-6.jpg) no-repeat center center;
	background-size: auto 100%;
	background-color:#f3f3f3;
}
#mechatronics-view6{
	background:url(img/mechatronics-7.jpg) no-repeat center center;
	-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;background-size:cover;
}
#mechatronics-view7{
	background:url(img/mechatronics-5.jpg) no-repeat right center;
	background-size: auto 100%;
	background-color:#f3f3f3;
}
#mechatronics-view9{
	background:url(img/mechatronics-8.jpg) no-repeat center center;
		background-size: auto 100%;
	background-color:#f3f3f3;
}
#mechatronics-view10{
	background:url(img/mechatronics-2.jpg) no-repeat center center;
	-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;background-size:cover;
} 
	
 /************* Section links ****************/   	
#info .col2 {
  padding: 0;
}
.col2.last{
	float:none;
 }
.info-item:last-of-type {
  padding-bottom: 3em;
}
 /************* Section links ****************/   
    #links .col2, #links .col100, #contact{
        padding:3em 4%;
    }
a.a1{
        font-size:1.5em;
    }
    .sidebar a{
        background-color: rgba(0, 0, 0, 0.25);
    }
    #contact h2{
        font-size:1.5em;
    } 

 /************* Section Footer ****************/  
footer ul li.hb.hd{ /*footer valerie motard*/
        font-size:1.5em;
	color: #565b6f;
    }
p.copyright {
	text-align:left;
	float:none;
	padding: 2em 0 1em 4%;
  bottom: 0;
  right: 0;
}
}