@charset "UTF-8";
.container {
	background-color: #FFFFFF;
	width:100%;
	margin-left: auto;
	margin-right: auto;
	border-bottom-width: 0px;
	padding-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
}
.row {
	width: 100%;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	display: inline-block;
}
	
.row.blockDisplay {
	display: block
}
.column_half {
	
	width: 50%;
	height: 20px;
	float: left;

	margin-top: 0px;
}
.columns {
	width: 25%;
	float: left;
	font-family: "Source Sans Pro";
	color: #A5A5A5;
	line-height: 24px;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: justify;
	margin-top: 15px;
	margin-bottom: 15px;
	padding-left: 0px;
	padding-right: 0px;
	margin-left: 0px;
	margin-right: 0px;
	
}
.row .columns p {
	padding-left: 10%;
	padding-right: 10%;
	

}
.container .columns h4 {
	text-align: center;
	color: #01B2D1;
}
.primary_header {
	width: 100%;
	background-color: #00253D;
	padding-top: 5px;
	padding-bottom: 5px;
	clear: left;
	border-bottom: 2px solid #FFFFFF;
}
.secondary_header {
	width: 100%;
	padding-top: 18px;
	padding-bottom: 18px;
	background-color: #666666;
	border-bottom: 2px solid #FFFFFF;
	clear: left;
}
.container .secondary_header ul {
	margin-top: 0%;
	margin-right: auto;
	margin-bottom: px;
	margin-left: auto;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 15px;
	padding-left: 0px;
	width: 100%;
	
}
.secondary_header ul li {
	list-style: none;
	float: left;
	margin-right: auto;
	margin-top: 0px;
	font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	font-weight: normal;
	font-size: 18px;
	color:#FFFFFF;
	letter-spacing: 1px;
	margin-left: auto;
	text-align: center;
	width:20%;	
	transition: all 0.15s ease-in-out;
}
.secondary_header ul li:hover {
	color: #2D2D2D;
	cursor:pointer;

	
	
	
}


.left_article {
	background-color: #FFFFFF;
	width: 60%;
	float: left;
	font-family: "Source Sans Pro";
	color: #343434;
	padding-bottom: 15px;

	
	
	
	
}



.noDisplay {
	display: none;
}
.container .left_article h3 , .container .left_article h5, .container .left_article h4{
	padding-left: 5%;
	padding-right: 5%;
	margin-top: 5%;
	color: #717070;
	font-weight: bold;
	text-transform: uppercase;
}

.container .left_article h5{
	padding-left: 5%;
	padding-right: 5%;
	margin-top: 30px;
	color: rgb(1, 178, 209);
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-weight: bold;
	text-transform: uppercase;
}


.container .left_article h4{
	color: brown;
	font-weight: bold;
	font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
	font-size: 14px;
}

.container .left_article p {
	padding-left: 5%;
	padding-right: 5%;
	text-align: justify;
	line-height: 24px;
	margin-top: 30px;
	margin-bottom: 15px;
/*	color: #B3B3B3;*/
	color: #777777;
	
	
}

.right_article {
	width: 40%;
	float: left;
	
}
.container .right_article ul {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.right_article ul li {
	font-family: "Source Sans Pro";
	list-style: none;
	text-align: center;
	background-color: #B3B3B3;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	margin-bottom: 10px;
	padding-top: 15px;
	padding-bottom: 15px;
	color: #FFFFFF;
	font-weight: bold;
	border-radius: 0px;
	transition: all 0.3s linear;
	border-left: 5px solid #717070;
}
.right_article ul li:hover {
	background-color: #717070;
	cursor: pointer;
}
.footer {
	background-color: #717070;
}
.title {
	font-weight: bold;
	font-style: normal;
	font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';
	text-align: center;
	color: #FFFFFF;
	letter-spacing: 5px;
	
}
.placeholder {
	/* [disabled]max-width: 400px;
*/
	/* [disabled]max-height: 200px;
*/
	float: right;
	padding-top:75px;
	/* [disabled]padding-left: 19px;
*/
	padding-bottom: 30px;
	width: 90%;
	

	
}
.left_half {
	background-color: #52BAD5;	
}
.container .column_half.left_half h2 {
	color: #FFFFFF;
	font-family: "Source Sans Pro";
	text-align: center;
}
.right_half {
	background-color: #01B2D1;
	color: #FFFFFF;
	font-family: "Source Sans Pro";
	text-align: center;
	font-weight: bold;
}
.column_title {
	padding-top: 5px;
	padding-bottom: 25px;
}
.copyright {
	text-align: center;
	padding-top: 20px;
	margin-top: 10px;
	background-color: #717070;
	color: #FFFFFF;
	text-transform: uppercase;
	font-weight: lighter;
	letter-spacing: 3px;
	border-top-width: 2px;
	font-family: "Source Sans Pro";
}


.content{

	float: left;
	
}

.prefooter{
	
	color: whitesmoke;
	background: #333333;
	margin-left: auto;	
	margin-right: auto;
	margin-top: 50px;
	margin-bottom: 80px;
	padding-top: 20px;
	width: 80%;
	height: 480px;
	
}

.prefooter h4{
	font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
	font-size: 36px;
	text-transform: uppercase;
	
	
}

.prefooter h5{
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	font-size: 18px;
	color: lightgray;
	
}

.prefooter p{
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	font-size: 18px;
	color: lightgray;
	
}

.social_content{
	margin-left: auto;
	margin-right: auto;
	width: 420px;		
	
}



body {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}

header div  h4{

	color: gray;
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
	text-align: center;
	font-size: 14px;
	letter-spacing: 4px;
}
a{
	text-decoration: none;
}

h6{
	
	margin: 0;
	padding: 0;	
}

div h6{
	
	font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
	color: #777777;
	font-size: 14px;
}

section article ul li{
	
	margin-left: 40px;
	color: gray;
	
	line-height: 1.4;
	
}

section article ul{
		
	padding-bottom: 20px
}



	@media (max-width: 320px) {
        
    iframe{
        
        width: 200px;
        height: 112px;

    }
    
    .video{
    
        background: black;
        padding-top: 50px;
        padding-bottom: 50px;
        min-height: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
            
    }
            
        
        
        
	.secondary_header ul li {
		float: none;
		margin-top: 28px;
		margin-left: 0px;
		width: 100%;


	}
	.container .secondary_header ul {
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
		margin-left: 0px;
		padding-top: 0px;
		padding-right: 0px;
		padding-bottom: 0px;
		padding-left: 0px;
		height: auto;
		width: 100%;
		text-align: center;
		font-size: 32px;

	}
	.secondary_header {
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
		margin-left: 0px;
		padding-top: 1px;
		padding-bottom: 40px;

	}
	.left_article {
		width: 100%;
		height: auto;
	}
	.right_article {
		width: 100%;
		height: auto;
	}
	.placeholder {
		width: 100%;
		margin-top: 22PX;
		margin-right: 0px;
		margin-bottom: 22PX;
		margin-left: 0px;
		padding-top: 0px;
		padding-right: 0px;
		padding-bottom: 0px;
		padding-left: 0px;
		max-width: 400px;
		max-height: 200px;
		height: auto;
	}
	.columns {
		width: 100%;
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
		margin-left: 0px;
		padding-top: 0PX;
		padding-right: 0PX;
		padding-bottom: 0PX;
		padding-left: 0PX;
	}
	.columns p {
		padding-left: 10px;
		padding-right: 10px;
	}
	.column_half.left_half {
		width: 100%;
	}
	.column_half.right_half {
		width: 100%;
	}
	.copyright {
		padding-top: 25px;
		padding-bottom: 0px;
		margin-bottom: 0px;
	}
	.container .left_article h3 {
		margin-top: 30px;
	}
	.social .social_icon img {
		width: 80%;
	}



	.container .secondary_header {
	}
		
		
		
		
}

/* I AM HERE */

@media (min-width: 321px) and (max-width: 768px) {
    
    iframe{
        
        width: 400px;
        height: 225px;

    }
    
    .video{
    
        background: black;
        padding-top: 50px;
        padding-bottom: 50px;
        min-height: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
            
    }
    
	
	.secondary_header ul li {
		float: none;
		margin-top: 35px;
		margin-left: 0px;
		width: 100%;
	}
	.container .secondary_header ul {
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
		margin-left: 0px;
		padding-top: 0px;
		padding-right: 0px;
		padding-bottom: 0px;
		padding-left: 0px;
		height: auto;
		width: 100%;
		text-align: center;
		font-size: 22px;

	}
	.secondary_header {
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
		margin-left: 0px;
		padding-top: 6px;
		padding-bottom: 40px;
	}
	.left_article {
		width: 100%;
		height: auto;
	}
	.right_article {
		width: 100%;
		height: auto;
		padding-bottom: 0px;
	}
	.placeholder {
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
		margin-left: 0px;
		padding-top: 0px;
		padding-right: 0px;
		padding-bottom: 0px;
		padding-left: 0px;
		width: 100%;
		max-width: 100%;
		height: auto;
		max-height: 100%;
	}
	
	
	.columns {
		width: 100%;
		margin-top: 6px;
		margin-right: 0px;
		margin-bottom: 6px;
		margin-left: 0px;
		padding-top: 0px;
		padding-right: 0px;
		padding-bottom: 0px;
		padding-left: 0px;
	}
	.columns p {
		padding-left: 14px;
		padding-right: 14px;
	}
	.column_half.left_half {
		width: 100%;
	}
	.column_half.right_half {
		width: 100%;
	}

	
	.group_skill{

		width:95%;
	
	
	}	
	
	.prefooter{

		width: 100%;
	}
	
	.graphic{		

		column-count: 1;
		

	}

	
	
}
	






@media (min-width: 769px) and (max-width: 1000px) {
    
    
    iframe{
        
        width: 300px;
        height: 337px;

    }
    
    .video{
    
        background: black;
        padding-top: 50px;
        padding-bottom: 50px;
        min-height: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
            
    }
	
	.secondary_header {
		overflow: auto;
		padding-top: 30px;
		padding-bottom: 30px;
	}
	
	.secondary_header ul li {
		margin-top: 10px;
		margin-right: 0%;
		margin-bottom: 14px;
		margin-left: 0%;

	}
	
	.left_article {
		height: auto;
	}
	.right_article {
		height: auto;
		padding-bottom: 27px;
	}
	
	.placeholder {
		width: 100%;
		margin-left: 0px;
		margin-right: 0px;
		padding-left: 0px;
		padding-right: 0px;
	}
	
	.columns {
		width: 50%;
		float: left;
		padding-left: 0px;
		padding-top: 0px;
		padding-right: 0px;
		padding-bottom: 0px;
	}
	
	.container .columns p {
		padding-left: 25px;
		padding-right: 25px;
		
	}
	
	
	.group_skill{

		width:47%;	
	}
	
	.graphic{		

		column-count: 2;
		

	}
			
	.projects{
	
		width: 100%;
		
	}


	
}

@media (min-width: 1001px) {
    
    iframe{
        width: 800px;
        height: 450px;
        
        
    }
    
    .video{
    
        background: black;
        padding-top: 50px;
        padding-bottom: 50px;
        min-height: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
            
    }
	

	.secondary_header {
	overflow: auto;
	padding-top: 30px;
	padding-bottom: 30px;
	}
	
	.group_skill{	
		
	width:23%;
	
	}	
	
	.graphic{	
	

	column-count: 2;
	

	}
	.projects{
	
	border: dotted 1px #DCDCDC;
	margin: 10px;
	width: 43%;	
	float: left;	
	

}

	


	
}


.thumbnail {
	width: 50px;
	border-radius: 50px;
	margin-left: auto;
}



.thumbnail_align {
	text-align: center;
	transition: all 0.5s ease-in;

}

.icone{
	margin-top: 30px;
	width: 75px;
	height: 75px;
}

.flag{
	
	width: 27px;

	
}



.social {
	text-align: center;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	width: 100%;
	background-color: #414141;
	clear: both;
	overflow: auto;
}
.social_icon {
   
	width: 16.66%;	    
	text-align: center;
	float: left;
	transition: all 0.3s linear;
	line-height: 0px;
	padding-top: 20px;   
	opacity: 0.50
}
.container .social .social_icon:hover {
	cursor: pointer;
	opacity: 0.9;
}



* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 100%;
  position: relative;
  margin: auto;  		
}

.mySlides {
    display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: rgba(235,235,235,0.32);
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 22px;
  width: 100%;
  text-align: center;
  font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
  cursor: pointer;
}

/* Number text (1/3 etc) */
.numbertext {
  font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
  color: rgba(235,235,235,0.32);
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor:pointer;
  height: 16px;
  width: 16px;
  margin: 5px 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.4s ease;
  margin-bottom: 50px;

}

.active, .dot:hover {
  background-color: #01B2D1;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 0.75s;
  animation-name: fade;
  animation-duration: 0.75s;
}

@-webkit-keyframes fade {
  from {opacity: .55}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .55}
  to {opacity: 1}
}

/*Skills*/

.legend{	
	
	margin-left: 5%;
	margin-right: 5%;
	padding-bottom: 30px;
	

}

.legend h6{
	
}



.content .legend h4{
	
	color: dimgray;
	font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
	font-size: 15px;
	padding-top: 2px;
	letter-spacing: 2px;

	
}


.graphic{	
	
	width: 100%;		
	margin-left: auto;
	margin-right: auto;
	border: 1px dotted #DDDDDD;
	padding-top: 20px;
	padding-bottom: 30px;
	

}


.legend .detail_skill{
	
	
		
	align-items: center;
	display: flex;
	width: 98%;
	margin-left: auto;
	margin-right: auto;
	border: #CCCCCC dotted 1px;
	background: #FAFAFA;
	padding: 14px;
	box-shadow: 1px 1px 2px #BBBBBB;	

	
		
}


.group_skill{
	
	background: #C7C7C7;
	margin-left: auto;
	margin-right: auto;
	float: left;	
	text-align: justify;
	width: 25%;	
	
}

.detail_skill{
	/*background: #F0F6F1;*/	
	margin-bottom: 20px;	
	align-items: center;
	display: flex;
	width: 85%;
	margin-left: auto;
	margin-right: auto;
	border: #CCCCCC dotted 1px;
	background: #FAFAFA;
	padding: 9px;
	box-shadow: 3px 3px 6px #EFEFEF;
		
	
}

.icon_skill{
	width: 50px;	
	margin-left: 5%;
	
}

/*Barra*/

.progressBar,  .bar_10, .bar_7, .bar_5, .bar_3, .bar_1, .bar_0   {		
  	
	height: 18px;	
	display: inline-flex;
	padding-bottom: 0px;	

}

.progressBar{
	margin-left: 4%;  
  
	margin: 0 auto;
		

}

.progressBar img:first-child{
	
	margin-left: 10px;
}



.projects img{
	
	width: 100%;
	
	
	
}

.projects h4{
	
	margin-left: 5px;

	
}


section div div div p{
	color: dimgray;
	font-size: 10px;
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	
}





#main_picture{
	
	opacity: 1;
}

#main_picture:hover{
	
	transition: all 0.3s ease-in;
}

#menu {
}