@font-face {
    font-family: "SF-Pro-Display-Thin";
    src: url('../assets/fonts/SF-Pro-Display-Thin.eot'); /* IE9 Compat Modes */
    src: url('../assets/fonts/SF-Pro-Display-Thin.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../assets/fonts/SF-Pro-Display-Thin.woff') format('woff'), /* Pretty Modern Browsers */
         url('../assets/fonts/SF-Pro-Display-Thin.ttf')  format('truetype'); /* Safari, Android, iOS */
    font-style: normal;
    font-weight: normal;
  }
  .logo-font {
    font-family: "SF-Pro-Display-Thin";
  }

body {
    padding: 3rem;
}

header {
	padding-top: 1rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

strong {
    font-weight: 300;
    color: #ac35b9;
}

header>span {
	padding: 30px 0;
	text-transform: uppercase;
	line-height: 1.2;
}

header>nav>span {
	padding-right: 10px;
}

.active {
    font-style: oblique;
    color: #ac35b9;
}

h1{
    font-size: 24px;
    font-weight: 500;
    width: 100%;
    margin-top: 20px;
}

.video-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 30px 0;
}

.video-container video {
    margin: 20px 0;
}

.video-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.video-text {

}

.video-button {
    background-color: white;
    border: 1px solid black;
    color: black;
    border-radius: 25px;
    cursor: pointer;
    text-align: center;
    padding: 5px 10px;
}

.video-button:nth-child(2) {
    margin: 40px 0;

}

.video-button:hover, .video-button:active {
    color: #ac35b9;
    background-color: white;
    border: 1px solid #ac35b9;
}

.extra-margin {
    margin-top: 5rem;
}

.section1{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.section1 p {
    padding-top: 0;
}

.profile-picture {
    display: flex;
    width: 100%;
    padding: 30px 0;
}

.section1 {
    font-size: 13px;
    font-display: italic;
}

h2{
    font-size: 20px;
    font-weight: 500;
    width: 100%;
    padding-top: 30px;
}

.section2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    list-style: none;
    line-height: 1.2;
}

.doble-column {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.doble-column > ul > li {
    margin-bottom: 20px;
}

.doble-column > ul > li > ul {
    margin-top: 20px;
}

.list{
 display: flex;
 flex-direction:row;
 flex-wrap: wrap;
 justify-content: space-between;
 padding-top: 20px;
 
}
section p{
    padding-top: 20px;
}

.main-class{
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.2;

}

.main-class>img{
    width: 100%;
    padding: 20px 0;
}

.empathy-map{
    display: flex;
    width: 100%;
    padding: 30px 0;
}

.centric-picture{
    display: flex;
    width: 100%;
    padding: 30px 0 ;
}

.second-class{
    display: flex;
    flex-direction: row;
    flex-flow: wrap;
    justify-content: space-between;
    align-items: center; 
}

.second-class>img{
    width: 100%;
    padding: 20px 0;
}
.media-content {
    display: flex;
    flex-direction: column;
}
.media-content div:first-child {
    margin: 20px 0;
}
.media-content .image-content {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.image-content img {
    width: 48%;
    height: 100%;
}


@media screen and (min-width: 500px) {
	body {
		padding: 10% 15% 0 15%;
	}
	h1 {
		font-size: 30px;
    }
    h2, p {
        margin: 0 120px 0 120px;
    }
    p {
        line-height: 1.2;
    }
    main {
        padding: 0 5%; 
    }
	body>footer {
		font-size: 16px;
    }
    .media-content {
        width: 100%;
        flex-direction: row;
        margin: 80px 0;
    }
    .media-content div {
        width: 40%;
    }

    .media-content div:first-child {
        width: 60%;
        font-size: 24px;
        font-weight: 300;
    }

    .media-content:nth-child(2n) {
        flex-direction: row-reverse;
        text-align: right;
    }

    .image-content img {
        align-self: end;
    }
}