*{
    box-sizing: border-box;
}

body{
    margin: 0;
    padding: 0;
    color: #606060;
}

@font-face {
    font-family: 'CMU Serif Roman';
    font-style: normal;
    font-weight: normal;
    src: local('CMU Serif Roman'), url(../fonts/cmunrm.woff) format('woff');
    }

@font-face {
    font-family: 'Garet';
    src: url(../fonts/garet/Garet-Book.woff);
}

header {
   padding-top: 10px;
   
}

header img {
    width: 100%;
}

header h1 {
    font-family: 'CMU Serif Roman';
    text-align: center;
    font-weight: 100;   
    line-height:0.4em;
    color: #606060;
    
}
header h3 {
    font-family: 'CMU Serif Roman';
    text-align: center;
    font-weight: 100;   
    line-height:0.4em;
    color: #606060;
    
}

nav {
    font-family: 'Garet';
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 30px;
    
}

nav a {
text-decoration: none;
margin: 0 70px;
color: #606060;
}



header a {
    text-decoration: none;
    font-size:'CMU Serif Roman';
    text-align: center;
    color: #606060;
    text-decoration:none;
    font-weight: 100; 
    
}

header a h3 {
 margin-top: 50px;
}

/* About */

section{
    padding: 70px 5%;

}

section h3 {

    text-align: center;
}
.about {
    display: flex;
    flex-wrap: wrap;
    
}

.imagen {
    flex: 300px;
    min-width: 200px;
   
    margin: 10px 10%;
    
}

.imagen img {
    width: 100%;
}

.tex_about {
    padding-top: 60px;
    flex: 400px;
    min-width: 200px;
    margin: 10px 10%;
   
}

/*Sharing Section*/

.sharing_container {
    display: flex;
    flex-wrap: wrap;
}

.sharing_container h3 {
    text-align: left;
}

.sharing_container div {
   padding: 20px;
   flex: 350px;
   
}

.sharing_container img {
    width: 100%;
}


/*my-work*/

.my-work-container {

    display: flex;
    flex-wrap: wrap;
   
}

.my-work-container div {
    padding: 20px;
    flex: 200px;
 
   
}


.my-work-container img {
    width: 100%;
}


h3 {

text-align: start;

}

section h2 {
   padding:  20px;
}

section div h2 {
    padding: 0;
}


/*contact*/

.contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
   
   
    
}

.contact div {
    padding: 0px;
    flex: 400px;
}

.contact img {
    width: 100%;
}

.contact nav {

    justify-content: left;
    margin: 5px 0px ; 
    
}


.contact a {
   margin: 0px 0px;
   
}



.logo a img {
    width: 50px;
    margin: 0px 15px 0px 2px;
    

}

.touch h3 {

    text-align: left;
}

.touch {

    margin-bottom: 50px;
}

/*footer*/

footer {
   
    text-align: center;
}

footer a {
    text-decoration: none;
    color: #606060;
}



@media screen and (max-width:500px) {
    nav a {
       margin: 0 40px;
       }
}