* {
   
-webkit-box-sizing: border-box;
    
-moz-box-sizing: border-box;
   
-ms-box-sizing: border-box;
    
box-sizing: border-box;

}



@media only screen and (min-width: 768px){
	body{
	color:black;
	font-family: Verdana, Arial, Geneva, Arial Black;
	font-size: 18px;
	}
}




.container{
margin-left: 100px;
margin-right:100px;
margin-bottom: 0;
margin-top: 0;
}


.container2{
margin-left: 20px;
margin-right:130px;
margin-bottom: 0;
margin-top: 0;

}



.row {
   
width: 100%;
       
display: block;

}


.title1 {
   
width: 100%;
       
display: flex;

margin-bottom: 0;
margin-top: 0;
}

.title {
   
width: 100%;
 
display: flex;      
margin-top: 0;
}



.title_heroimg{
width: 100%;
       
display: flex;
margin-top: 0;
margin-left: 0;

}

.small_title_heroimg{
width: 100%;
       
display: flex;
margin-top: 0;
margin-left: 0;
}



.col-1 {
    
width: 8.33%;

}



.col-2 {
    
width: 16.66%;

}



.col-3 {
    
width: 25%;

}



.col-4 {
    
width: 33.33%;

}



.col-5 {
    
width: 41.66%;

}



.col-6 {
    
width: 50%;

}



.col-7 {
    
width: 58.33%;

}



.col-8 {
    
width: 66.66%;

}



.col-9 {
    
width: 75%;

}



.col-10 {
    
width: 83.33%;

}



.col-11 {
    
width: 91.66%;

}



.col-12 {
    
width: 100%;
}






body{

color:black;
font-family: Verdana, Arial, Geneva, Arial Black;
font-weight: normal;
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: 0;
background-color: #2977e1;
font-size: 25px;

}


h2{
color:white;
background-image: url("images/b2.gif");
background-repeat:no-repeat;
background-size:100%;
background-position:top;
margin-top: 0;
margin-bottom: 0;
}


h3{
background-color:white;
margin-top: 0;
font-size: 1.1em;
}


h4{
color:white;
margin-top: 0;
margin-bottom:150px;
font-size: 1.1em;
}


h5{
color:black;
background-color:white;
margin-top: 0;
margin-bottom: 0;
font-size: 1.1em;
}




.name{
margin-top: 180px;
font-size: 180%;
color: white;

}


.intro{
color: white;
font-weight: lighter;
font-family:Verdana;
font-size: 75%;
}



.sfu{
display: flex;
margin-left: 100px;
margin-right:100px;
}

.fic{
margin-top: 50px;
display: flex;
margin-left: 100px;
margin-right:100px;
}



.selfintro{
font-size: 1.6em;
font-weight: 200;
font-family:impact;
color:black;
margin-left: 100px;
margin-bottom:50px;
margin-top: 100px;
}

.sfu_descr{
font-size: 90%;
font-weight: 200;
color:#555;
font-family: Helvetica,Arial;
margin-bottom:100px;
word-spacing: 5px;
text-align: justify;
}

.project_descr{
font-size: 90%;
font-weight: 200;
color:#555;
font-family: Arial;
margin-left: 0;
margin-bottom:100px;
}

.skills{
font-size: 1.6em;
font-weight: 200;
font-family:impact;
color:white;
margin-left: 130px;
margin-bottom:50px;
margin-top: 100px;
}

.swtitle{
font-family: Arial;
font-size: 95%;
font-weight: 200;
margin-left: 200px;
margin-bottom:50px;
}

.sw{
font-family: Arial;
font-size: 90%;
font-weight: 200;
}

.p1_airobot{
color:white;
font-size: 100%;
font-weight: 300;
background-color: #2977e1;
background-size:100%;
opacity: 0.8;
float: right;
margin-left: 15px;
margin-bottom:15px;
padding-left: 20px;
}



.p2_web{
color:white;
font-size: 100%;
font-weight:300;
background-color:#fdbc08;
background-size:100%;
opacity: 0.8;
float: left;
margin-right: 0;
margin-bottom:15px;
padding-left: 30px;
padding-right: 130px;

}


.p3_VHDL{
color:white;
font-size: 100%;
font-weight: 300;
background-color: #e55e58;
opacity: 0.8;
background-size:100%;
float: left;
margin-bottom:15px;
padding-left: 20px;
padding-right: 70px;
}


.p4_sensors{
color:white;
font-size: 100%;
font-weight: 300;
background-color:#002950;
opacity: 0.7;
background-size:100%;
float: right;
margin-left: 15px;
margin-right: 0;
margin-bottom:15px;
padding-left: 20px;
}

.p7_solidwork{
color:white;
font-size: 100%;
font-weight: 300;
background-color:#002950;
opacity: 0.7;
background-size:100%;
margin-top:0;
margin-bottom:90px;
padding-left: 20px;
padding-bottom: 170px;
}

.p0_carnd{
color:white;
font-size: 100%;
font-weight: 300;
background-color:#002950;
opacity: 0.7;
background-size:100%;
margin-top:0;
margin-bottom:15px;
padding-left: 20px;
padding-bottom: 170px;
}


.hero_text{
max-width: 60%;
left:30px;
padding-left: 20px;
}

.hero_text1{
max-width: 70%;
left:30px;
padding-left: 20px;
}


.hero_text2{
max-width: 80%;
left:50px;
padding-left:30px;
}

.hero_text3{
max-width: 95%;
left:50px;
padding-left:30px;
}

.contact{
font-size: 72%;
font-weight: 200;
color: white;
font-family: Arial;
margin-left: 0;
margin-bottom:0;
line-height: 1.8;
}


#projects{
font-size: 90%;
font-weight: 200;
color: white;
margin-top: 0;
margin-right: 200px;
margin-left: 200px;
margin-bottom:100px;
}


#menu-center {
background-color: #2977e1;
height: 48px;
font-size: 85%;
font-weight: bold;
font: Verdana;
margin-top:20px;
margin-left: 0;
margin-bottom:0;
}

#menu-center ul{
padding: 0;
margin:0;
list-style-type: none;
text-align:center;
}

#menu-center li{
display: inline;
padding-right: 20px;
padding-left: 20px;
padding-top: 22px;
padding-bottom: 22px;
margin-bottom: 0;
vertical-align: middle;
}

#menu-center a{
text-decoration:none;
color: white;
padding: 20px 20px 20px 20px;
vertical-align: right;
}

#menu-center a:hover{
color: black;
background-color:#d3d3d3;
}

.active {
font-family:Verdana;
color: #fff;
text-decoration: none;
line-height: 27px;
}

.diffsize{
font-size: 110%;
}


.message {
    border-radius: 5px;
    padding: 20px;
}

.label{
font-size: 90%;
font-weight: 200;
color:#555;
font-family: Arial;
}