*{box-sizing:border-box;font-family: 'Poppins', sans-serif;}

:root{
    --primary: #623F9B;
    --black: #333;
    --white: #fff;
    --light: #f9f5ff;
}

body,html{margin:0;padding:0;}

header{
    padding:15px;
}
header nav{
    display:flex;
}
header nav .logo{
    flex:1;
}
header nav .logo a{
    text-decoration:none;
    color:var(--white);
    font-weight:700;
    font-size:2rem;
    display:flex;
    max-width:250px;
}
header nav .logo img{
    height:50px;
    margin-left:10px;
}
header nav .menu-button{
    width:50px;
    display:flex;
    justify-content:center;
    align-items:center;
}

button.link, a.link{
    background-color:var(--white);
    padding:5px 20px;
    color:var(--primary);
    border:none;
    font-size:2rem;
    cursor: pointer;
}
button.circle, a.circle{
    background-color:var(--primary);
    color:var(--white);
    display:inline-flex;
    justify-content:center;
    align-items:center;
    width:50px;
    height:50px;
    border-radius:25px;
    border:none;
    cursor:pointer;
}

.btn-primary{
    background-color:var(--primary);
    color:var(--white);
    display:inline-flex;
    padding:10px 20px;
    border-radius:25px;
    border:none;
    cursor:pointer;
}


/* PAGES */
div.page section{
    padding:20px;
}
/* --Home-- */
div.home-content{
    width:100%;
    max-width:320px;
    margin:auto;
}
div.home-content .profile-picture{
    margin:auto;
    width:200px;
    height:200px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border-radius:50%;
}
div.home-content .profile-picture img{
    width:100%;
}
div.home-content h1.title{
    font-size:1.5rem;
    text-align:center;
    margin-bottom:0;
}
div.home-content h4.subtitle{
    font-size:1rem;
    font-weight:500;
    text-align:center;
    margin-top:0;
}
div.home-content ul.social-btns{
    margin:0 0 20px 0;
    padding:0;
    list-style:none;
    display:flex;
    justify-content:center;
    align-items:center;
}
div.home-content ul.social-btns li{
    margin:3px;
}
div.home-content ul.social-btns li a{
    text-decoration:none;
}

/* --Resume-- */
div.resume-content ul.data{
    list-style:none;
    margin:0;
    padding:20px;
    background-color:var(--primary);
    border-radius:20px;
    color:var(--white);
}
div.resume-content ul.data li{
    margin:10px 0;
    padding:10px;
    border-bottom:solid 1px var(--white);
    word-break: break-all;
}
div.resume-content ul.data li small{
    display:block;
}

/* --Studies & Work-- */
div.studies-content ul.data, div.work-content ul.data{
    list-style:none;
    margin:0;
    padding:0;
}
div.studies-content ul.data li strong, div.work-content ul.data li strong{
    display:block;
}
div.studies-content ul.data li a, div.work-content ul.data li a{
    color:var(--primary);
}

/* MENU */
.menu{
    background-color:var(--primary);
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    display:none;
    flex-direction:column;
}
.menu.active{
    display:flex;
    z-index:10;
}
.menu section{
    flex:1;
    display:flex;
    
    justify-content:center;
    overflow-y:auto;
}
.menu section article{
    width:100%;
    max-width:350px;
    padding:25px;
}
.menu section article div.profile-picture{
    width: 150px;
    height: 150px;
    overflow:hidden;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    left:calc(50% - 75px);
    top:0;
    border-radius:50%;
}
.menu section article div.profile-picture img{
    width: 100%;
}
.menu section article div.profile-data h2{
    font-size:1.3rem;
    text-align:center;
    color:var(--white);
    margin-bottom:0;
    overflow-wrap:normal;
}
.menu section article div.profile-data h4{
    font-size:0.9rem;
    font-weight:300;
    color:var(--white);
    text-align:center;
    margin-top:0;
    overflow-wrap:normal;
}
.menu section article ul{
    list-style:none;
    margin:0;
    padding:0;
    width:100%;
}
.menu section article ul li{
    text-align:center;
}
.menu section article ul li a{
    color:var(--white);
    font-size:1.3rem;
    text-decoration:none;
    padding:5px;
    display:inline-block;
    width:100%;
    border-radius:20px;
}
.menu section article ul li a.active, .menu section article ul li a:hover{
    background-color:var(--white);
    color:var(--primary);
}

.menu footer{
    padding:50px 0;
}
.menu footer ul{
    display:flex;
    list-style:none;
    margin:0;
    padding:0;
    flex-wrap:wrap;
    gap:5%;
    width:100%;
}
.menu footer ul li{
    margin-top:10px;
    width:30%;
}
.menu footer ul li a{
    /*text-decoration:none;
    color:var(--primary) !important;
    display:block;
    padding:20px 10px;
    text-align:center;
    background-color:var(--white);
    font-size:1.2rem;*/
}
.menu footer ul li button{
    border:none;
    background-color:transparent;
    cursor: pointer;
    font-size:1.2rem;
}
.menu footer ul li a span.icon, .menu footer ul li button span.icon{
    display:flex;
    background-color:var(--white);
    color:var(--primary);
    width:50px;
    height:50px;
    border-radius:50%;
    margin:auto;
    justify-content:center;
    align-items:center;
}
.menu footer ul li a span.text, .menu footer ul li button span.text{
    display:block;
    font-size:0.8rem;
    margin-top:10px;
    color:var(--white);
}

.menu .legal-links{
    text-align:center;
    padding:20px;
    color:var(--white);
}
.menu .legal-links a{
    color:var(--white);
    font-size: 0.8rem;
}

/* MODAL */
.modal{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.6);
    display:none;
}
.modal.active{
    display:flex;
}
.modal .modal-box{
    margin:auto;
    background-color:var(--white);
    padding:20px 15px;
}

/* Inputs */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
  }
  
  .switch input { 
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider {
    background-color: var(--primary);
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px var(--primary);
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }
  
  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }

/* Depending inputs */
.field-dependent{
    display:none;
}
.field-dependent.active{
    display:block;
}

.edit-modal-button, .modal-button{
    position:fixed;
    bottom:15px;
    right:20px;
    padding:10px 20px;
    border:2px solid var(--white);
    border-radius:30px;
    background-color:var(--primary);
    color:var(--white);
    cursor:pointer;
}

.edit-modal{
    width:90%;
    max-width:500px;
    height:90%;
    border:5px solid var(--primary);
    border-radius:20px;
    padding:0;
}
.edit-modal::backdrop {
    background-color: rgba(255,255,255,0.5);
}
.edit-modal form{
    height:100%;
    width:100%;
    display:flex;
    flex-direction:column;
}
.edit-modal form section{
    flex:1;
    padding:20px;
    overflow:auto;
}
.edit-modal form section label{
    display:block;
    margin-bottom:20px;
}
.edit-modal form section input, .edit-modal form section select, .edit-modal form section textarea{
    display:block;
    padding:10px;
    width:100%;
}

.edit-modal form footer{
    padding:10px 20px;
    border-top:5px solid var(--primary);
    text-align:center;
}
.edit-modal form footer button{
    padding:10px 20px;
    border:2px solid var(--primary);
    border-radius:50px;
    background-color:var(--primary);
    color:var(--white);
    cursor:pointer;
}
.edit-modal form footer button.close{
    background-color:var(--white);
    color:var(--black);
    border-color:var(--black);
}

.page-container{
    width:100%;
    max-width:1024px;
    margin:auto;
}
.full-page{
    background-color:var(--light);
    min-height:calc(100vh - 88px);
    overflow:auto;
    /*margin-left: calc((100vw - 1024px) / -2);
    width:calc(100vw);*/
}

/* JOBS */
.jobs-list{
    display:flex;
    flex-wrap:wrap;
    margin-bottom:50px;
}
.jobs-list .job{
    width:100%;
    max-width:320px;
    border-radius:10px;
    border:1px solid var(--primary);
    margin:5px auto;
    overflow:hidden;
}
.jobs-list .job .job-header{
    display:flex;
    align-items:center;
    background-color:var(--light);
    border-top-left-radius:10px;
    border-top-right-radius:10px;
}
.jobs-list .job .job-header .company-image{
    padding:10px;
}
.jobs-list .job .job-header .company-image img{
    width:50px;
    height:50px;
    border-radius:50%;
}
.jobs-list .job .job-header .job-position{
    padding:10px;
    font-size:0.8rem;
}

.jobs-list .job .job-content{
    display:flex;
    font-size:0.7rem;
    align-items:center;
    background-color:var(--light);
}
.jobs-list .job .job-content .company-name{
    padding:5px 5px 5px 10px;
    text-align:left;
    flex:1;
}
.jobs-list .job .job-content .date{
    padding:5px 10px 5px 5px;
    text-align:right;
}
.jobs-list .job .job-footer{
    display:flex;
}
.jobs-list .job .job-footer .job-salary{
    flex:1;
}
.jobs-list .job .job-footer .job-apply{
    padding:10px 10px 10px 5px;
}
.jobs-list .job .job-footer .job-apply button{
    padding:10px 20px;
    font-size:0.7rem;
    color:var(--white);
    background-color:var(--primary);
    border:none;
    border-radius:30px;
    cursor:pointer;
}

.modal-element-button .event-preview,
.modal-element-button .job-header,
.modal-element-button .job-content{
    cursor:pointer;
}

/* Events */
.jobs-list .job .event-preview{
    width:100%;
    height:150px;
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
}

/* Access */
.tabs{
    width:100%;
}
.tabs nav{
    display:flex;
}
.tabs nav button{
    padding:10px 20px;
    background-color:var(--light);
    color:var(--black);
    border:none;
    flex:1;
    font-weight:600;
    font-size:1.1rem;
    cursor:pointer;
}
.tabs nav button.active{
    background-color:var(--primary);
    color:var(--white);
}
.tabs section{
    display:none;
    text-align:center;
}
.tabs section.active{
    display:block;
}
.tabs section input, #key-verification input{
    padding:10px;
    width:100%;
    display:block;
    margin-bottom:20px;
}
.tabs section button, #key-verification button{
    padding:10px 20px;
    border:none;
    border-radius:50px;
    background-color:var(--primary);
    color:var(--white);
    cursor:pointer;
}

.legal-links{
    text-align:center;
}
.legal-links a{
    color:var(--primary);
}

.access-instructions{
    text-align:center;
}
#key-verification{
    width:100%;
    text-align:center;
}

/* Networking */
.networking-card{
    width:100%;
    max-width:320px;
    border-radius:10px;
    border:none;
    margin:5px auto;
    background-color:var(--white);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.networking-card .post-preview{
    cursor:pointer;
    position:relative;
    min-height:25px;
}
.networking-card .post-preview .post-image{
    height:239px;
    width:100%;
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
}
.networking-card .post-preview .type-icon{
    position:absolute;
    top:15px;
    right:15px;
    text-shadow:0 0 5px var(--black);
    color:var(--white);
    font-size:1.5rem;
}

.networking-card .post-data{
    display:flex;
}
.networking-card .post-data .picture{
    margin:-15px 0 0 10px;
    width:80px;
    height:80px;
    border:solid 5px var(--light);
    border-radius:50%;
    z-index:1;
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
}
.networking-card .post-data .text{
    padding:10px;
    flex:1;
}
.networking-card .post-data .text h5{
    font-size:0.8rem;
    margin:0;
    padding:0;
}
.networking-card .post-data .text h5 a{
    color:black;
    text-decoration:none;
}
.networking-card .post-data .text small{
    color:#a3a3a3;
    font-size:0.7rem;
}

.networking-card .post-content{
    padding:10px;
    font-size:0.9rem;
    color:var(--black);
    flex:1;
}
.networking-card .post-content a{
    color:var(--primary);
}

.networking-card .post-actions{
    padding:10px;
    text-align:center;
}
.networking-card .post-actions button{
    padding:10px;
    width:80px;
    background-color:transparent;
    color:var(--black);
    cursor:pointer;
    border:none;
}
.networking-card .post-actions button.unlike, .networking-card .post-actions button.unsave{
    background-color:var(--primary);
    color:var(--white);
}
.networking-card .post-actions button.active{
    color:var(--primary);
}

.modal-component{
    border:none;
    border-radius:5px;
    overflow:auto;
    box-shadow:0 0 15px var(--black);
    width:90%;
    max-width:500px;
    height:90%;
    max-height:500px;
}

.modal-component::backdrop{
    background-color:rgba(0,0,0,0.4);
}

.modal-component form{
    width:100%;
    /*height:100%;*/
    display:flex;
    flex-direction:column;
}

.modal-component .modal-header{
    position:relative;
}
.modal-component .modal-header .close{
    padding:10px;
    display:block;
    border:none;
    background-color:transparent;
    font-size:1rem;
    cursor:pointer;
    outline:none;
}

.modal-component .modal-content{
    flex:1;
    overflow:auto;
    padding:20px 0;
}
.modal-component .modal-content .preview img{
    width:100%;
}

.modal-component .modal-content textarea::placeholder{
    color:rgba(0,0,0,0.4);
}
.modal-component .modal-footer.flex{
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.modal-component .modal-footer .extras{
    /*margin:0 10px 0 0;
    padding:10px;
    border:1px solid var(--primary);
    border-radius:5px;*/
}
.modal-component .modal-footer button.send-button{
    padding:10px 20px;
    border:none;
    border-radius:50px;
    color:var(--white);
    background-color:var(--primary);
    cursor:pointer;
}
.modal-component .modal-footer button.send-button:disabled{
    opacity:0.6;
    cursor:progress;
}

.form-control{
    padding:10px;
    border:1px solid var(--primary);
    border-radius:5px;
}
.form-control .leyend{
    margin:0;
    padding:0;
    font-size:0.8rem;
    color:var(--black);
    text-align:right;
}
.form-control textarea{
    width:100%;
    height:150px;
    padding:10px;
    border:none;
    resize:none;
    outline:none;
}
label.upload-input input{
    display:none;
}
label.upload-input button{
    background-color:transparent;
    border:1px solid var(--primary);
    color:var(--primary);
    font-size:1.2rem;
    padding:5px;
    width:40px;
    height:40px;
    cursor:pointer;
}

.section-tiles{
    margin:0;
    padding:0;
    list-style:none;
    width:100%;
    display:flex;
    flex-wrap:wrap;
}
.tile-item{
    padding:20px;
    border-bottom:1px solid var(--black);
    width:100%;
    max-width:492px;
    display:flex;
    align-items:center;
    cursor:pointer;
}
.tile-item .tile-media{
    width:20%;
    max-width:100px;
}
.tile-item .tile-description{
    flex:1;
    padding-left:20px;
}
.tile-clear{
    clear:both;
}

.tile-image{
    width:100%;
    padding-top:100%;
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    border-radius:50%;
}
.tile-name{
    font-size:0.8rem;
    color:var(--black);
    font-weight:300;
    margin:0;
    padding:0;
    text-transform:uppercase;
}
.tile-position{
    font-size:0.6rem;
    color:var(--black);
    font-weight:500;
    margin:0;
    padding:0;
    text-transform:uppercase;
}
.tile-headline{
    font-size:1rem;
    color:var(--primary);
    font-weight:500;
    margin:10px 0 0 0;
    padding:0;
}
.tile-time{
    font-size:0.8rem;
    color:var(--primary);
    font-weight:300;
    margin:5px 0 0 0;
    padding:0;
}

.tile-item.sponsored{
    background-color:var(--primary);
    color:var(--white);
}
.tile-item.sponsored .tile-name, .tile-item.sponsored .tile-position{color:var(--white);}
.tile-item.sponsored .tile-headline, .tile-item.sponsored .tile-time{color:var(--light) !important;}