@font-face { 
    font-family: OpenSans; 
    font-style: normal;
    font-weight:700; 
    src: local('OpenSans Bold'), local('OpenSans-Bold'),
            url('fonts/OpenSans-Bold.ttf') format('truetype'); 
}

@font-face { 
    font-family: OpenSans; 
    font-style: italic;
    font-weight:700; 
    src: local('OpenSans BoldItalic'), local('OpenSans-BoldItalic'),
            url('fonts/OpenSans-BoldItalic.ttf') format('truetype'); 
}

@font-face { 
    font-family: OpenSans; 
    font-style: normal;
    font-weight:700; 
    src: local('OpenSans ExtraBold'), local('OpenSans-ExtraBold'),
            url('fonts/OpenSans-ExtraBold.ttf') format('truetype'); 
}

@font-face { 
    font-family: OpenSans; 
    font-style: italic;
    font-weight:700; 
    src: local('OpenSans ExtraBoldItalic'), local('OpenSans-ExtraBoldItalic'),
            url('fonts/OpenSans-ExtraBoldItalic.ttf') format('truetype'); 
}

@font-face { 
    font-family: OpenSans; 
    font-style: italic;
    src: local('OpenSans Italic'), local('OpenSans-Italic'),
            url('fonts/OpenSans-Italic.ttf') format('truetype'); 
}

@font-face { 
    font-family: OpenSans; 
    font-style: normal;
    src: local('OpenSans Regular'), local('OpenSans-Regular'),
            url('fonts/OpenSans-Regular.ttf') format('truetype'); 
}

@font-face { 
    font-family: OpenSans; 
    font-style: normal;
    font-weight:300; 
    src: local('OpenSans Light'), local('OpenSans-Light'),
            url('fonts/OpenSans-Light.ttf') format('truetype'); 
}

@font-face { 
    font-family: OpenSans; 
    font-style: italic;
    font-weight:300; 
    src: local('OpenSans LightItalic'), local('OpenSans-LightItalic'),
            url('fonts/OpenSans-LightItalic.ttf') format('truetype'); 
}

@font-face { 
    font-family: OpenSans; 
    font-style: normal;
    font-weight:600; 
    src: local('OpenSans SemiBold'), local('OpenSans-SemiBold'),
            url('fonts/OpenSans-SemiBold.ttf') format('truetype'); 
}

@font-face { 
    font-family: OpenSans; 
    font-style: italic;
    font-weight:600; 
    src: local('OpenSans-SemiBoldItalic'), local('OpenSans-SemiBoldItalic'),
            url('fonts/OpenSans-SemiBoldItalic.ttf') format('truetype'); 
}

body, html {
  height: 100%;
}

body {
    margin:0px;
    padding:0px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    overflow:hidden;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1; 
}
 
::-webkit-scrollbar-thumb {
    background: #888; 
}

::-webkit-scrollbar-thumb:hover {
    background: #555; 
}

.headerMainDiv {
    position: fixed;
    overflow:hidden;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 10px;
    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
    height:32px;
}

.menuMainDiv {
    position:relative;
    top:50%;
    transform:translateY(-50%);
    width:28px;
    height:28px;
    user-select:none;
    transition: transform 0.5s, top 0.5s;
    cursor:pointer;
}

.menuMainDiv span:first-child {
    margin-top: 3px;
}

.menuMainDiv span {
    display: block;
    width: 25px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;
  
    background: #ffffff;
    border-radius: 3px;

    left:50%;
    transform:translateX(-50%);
}

.activeMenuMainDiv {
    transform:rotate(90deg);
    top:0%;
}

.headerTitleMainDiv {
    position:absolute;
    margin-left:40px;
    top:50%;
    transform:translateY(-50%);
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
    color:#FFFFFF;
    font-weight:400;
    font-size:2em;
    user-select: none; 
}

.headerTitleMainDiv > span {
    font-weight:bold;
}

.iconMainDiv {
    position:absolute;
    right:15px;
    top:50%;
    transform:translateY(-50%);
}

.iconMainDiv > div {
    width:35px;
    height:30px;
    float:left;
    position:relative;
    overflow:hidden;
    border:2px solid #FFFFFF;
    border-radius:5px;
    margin-left:10px;
    color:#ffffff;
    transition: width 0.5s, opacity 0.2s;
    user-select:none;
    cursor:pointer;
}

.iconMainDiv > div > i {
    float:left;
    line-height:30px;
    margin-left:9.5px;
    font-size:16px;
}

.iconMainDiv > div > span {
    opacity:0;
    font-size:9px;
    line-height:32px;
    margin-left:9px;
    margin-right:auto;
}

.bodyMainDiv {
    position:relative;
    top:52px;
    overflow:hidden;
    background-color:#636262;
}

.navMenu {
    position:relative;
    overflow-y:auto;
    overflow-x:hidden;
    float:left;
    width:200px;
    background-color:#636262;
    transition: transform 0.5s, width 0.5s;
}

.navMenuClosed {
    position:relative;
    transform:translateX(-100%);
    width:0px;
}

.menuList {
    width:100%;
}

.menuList > div {
    margin:10px;
    font-family: OpenSans;
    font-size: 16px;
    color:#ffffff;
    user-select:none;
    cursor:pointer;
}

.menuList > div:nth-child(odd) {
    margin-left:12px;
    margin-right:12px;
}

.menuList > div:nth-child(even) {
    border-bottom:1px dotted #FFFFFF;
}

.bodyMain {
    position:relative;
    overflow-y:auto;
    overflow-x:hidden;
    background-color:#FFFFFF;
}


.parallax-1, .parallax-2, .parallax-3, .parallax-4, .parallax-5, .parallax-6, .parallax-7, .parallax-8, .parallax-9 {
  position: relative;
  opacity: 0.65;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.parallax-1 {
  background-image: url("../Images/img_parallax.jpg");
  min-height: 100%;
}

.parallax-2 {
  background-image: url("../Images/img_parallax2.jpg");
  min-height: 400px;
}

.parallax-3 {
  background-image: url("../Images/img_parallax3.jpg");
  min-height: 400px;
}

.parallax-4 {
  background-image: url("../Images/img_parallax4.jpg");
  min-height: 400px;
}

.parallax-5 {
  background-image: url("../Images/img_parallax5.jpg");
  min-height: 400px;
}

.parallax-6 {
  background-image: url("../Images/img_parallax6.jpg");
  min-height: 400px;
}

.parallax-7 {
  background-image: url("../Images/img_parallax7.jpg");
  min-height: 400px;
}

.parallax-8 {
  background-image: url("../Images/img_parallax8.jpg");
  min-height: 400px;
}

.parallax-9 {
  background-image: url("../Images/img_parallax9.jpg");
  min-height: 400px;
}

.contentHtml {
    position:relative;
    user-select: none; 
}

.role {
    position: absolute;
    padding: 18px;
    background-color:#000000;
    text-align:center;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    user-select: none; 
}

.role > span {
    font-family: OpenSans;
    font-size: 25px;
    color:#FFFFFF;
    white-space:nowrap;
}

.card {
    min-width:400px;
    max-width:960px;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}

.summary-loading {
    margin-left: 50%;
    transform: translateX(-50%);
    display:block;
}

.summary {
    position:relative;
    overflow:hidden;
    display:none;
}

.summary > div:first-child {
    position:relative;
    overflow:hidden;
    display: table-cell;
    vertical-align: middle;
}

.summary > div:first-child > div {
    position:relative;
    border:5px solid rgba(51, 51, 51, 0.5);
    width:180px;
    height:180px;
    border-radius:180px;
    padding: 10px;
}

.summary > div:first-child > div > img {
    width:180px;
    height:180px;
    border-radius:180px;
}

.summary > div:last-child {
    position:relative;
    overflow:hidden;
    text-align:justify;
    max-width:90%;
    display: table-cell;
    vertical-align: top;
    padding-left: 20px;
    padding-right: 20px;
    font-family:OpenSans;
    font-size:14px;
    font-weight:600;
    color:#333;
}

.profile-space {
    padding:10px;
}

.profile-space-btn {
    height:90px;
}

.profile-btn-default {
    background: rgb(3, 22, 52);
    border-color: rgb(3, 22, 52);
    float:left;
    width:35px;
    height:30px;
    margin:5px;
    line-height: 35px;
    text-align: center;
}

.profile-btn-default > i {
    font-size:18px;
    color:#FFFFFF;
}

.profile {
    position:relative;
    overflow:hidden;
    height:70px;
    padding:10px;
}

.profile > div:first-child {
    position:relative;
    overflow:hidden;
    height:100%;
    float:left;
    font-size: 65px;
    color:rgba(51, 51, 51, 0.5);
    width:130px;
}

.profile > div:last-child {
    position:relative;
    overflow:hidden;
    height:100%;
}

.profile > div:last-child > div {
    position: relative;
    overflow: hidden;
    height: 50%;
    text-align: left;
}

.profile > div:last-child > div > span {
    font-family: OpenSans;
}

.profile > div:last-child > div:first-child {
    border-bottom:1px solid rgba(51, 51, 51, 0.5);
}

.profile > div:last-child > div:first-child > span {
    position:relative;
    top:10%;
    font-size: 20px;
    font-weight: bold;
    color: #000000;
}

.profile > div:last-child > div:last-child > span {
    position:relative;
    top:25%;
    transform:translateY(-50%);
    font-family:OpenSans;
    font-size:14px;
    font-weight:600;
    color:#333;
}

.profile-language {
    border-bottom:initial!important;
    height:initial!important;
}

.profile-language > span:first-child {
    font-weight:bold!important;
    font-family:OpenSans!important;

    position: initial!important;
    top: initial!important;
    font-size: initial!important;
    color: initial!important;
}

.profile-language > span:last-child {
    font-weight:bold!important;
    font-family:OpenSans!important;

    position: initial!important;
    top: initial!important;
    font-size: initial!important;
    color: #0b2aea!important;
}

.education-loading {
    margin-left: 50%;
    transform: translateX(-50%);
    display:block;
}

.education-card {
    display:none;
    position:relative;
    overflow:hidden;
    margin-bottom:15px;
}

.courses-loading {
    margin-left: 50%;
    transform: translateX(-50%);
    display:block;
}

.courses-card {
    display:none;
    position:relative;
    overflow:hidden;
    margin-bottom:15px;
}

.education-space {
    padding:10px;
}

.education-header {
    border-bottom: 1px solid rgba(51, 51, 51, 0.5);
    text-align:left;
}

.education-header > span {
    font-family: OpenSans;
    font-size: 20px;
    font-weight: bold;
    color: #000000;
    margin-top: 10px;
    margin-bottom: 10px;
}

.education-body-first {
    padding-top: 10px;
    padding-bottom: 10px;
    text-align:left;
}

.education-body-first > i:first-child {
    font-size: 14px;
    color: #777777;
}

.education-body-first > span {
    font-family: OpenSans;
    font-size: 14px;
    color: #777777;
}

.education-body-first > span:nth-child(2) {
    font-weight: bold;
}

.education-body-first > span:nth-child(3) {
    font-style: italic;
    font-weight: 600;
}

.education-body-first > i:last-child {
    font-size: 12px;
    color: #50538f;
    margin-left: 2px;
    cursor: pointer;
}

.education-body {
    text-align: left;
    padding-left: 10px;
}

.education-body > span {
    font-family: OpenSans;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    display: block;
}

.caption {
  position: absolute;
  left: 0;
  top: 50%;
  transform:translateY(-50%);
  width: 100%;
  text-align: center;
  color: #000;
  user-select: none; 
}

.caption span.border {
  background-color:transparent;
  text-shadow: 3px 3px 2px rgb(0, 0, 0);
  color: #f7f7f7;
  padding: 18px;
  font-size: 50px;
  letter-spacing: 10px;
  font-weight:bold;
}

.skill-loading {
    margin-left: 50%;
    transform: translateX(-50%);
    display:block;
}

.skill-space {
    padding:10px;
}

.skill-card {
    display:none;
    position:relative;
    overflow:hidden;
    margin-bottom:15px;
    padding:10px;
    user-select: none; 
}

    .skill-card > div {
        padding: 10px;
        float: left;
        background-color: #f5f2f2;
        margin-right:10px;
        margin-bottom: 12px;
        border-radius:10px;
        box-shadow: 3px 3px 5px #AAAAAA;
    }

        .skill-card > div > span {
            font-size: 18px;
            font-family: OpenSans;
            color: #333;
            font-weight: bold;
        }

.skill-certification-card {
    color: #0b2aea!important;
    cursor:pointer;
}

.skill-certification-card-span {
    color: #0b2aea;
    font-size: 18px;
    font-family: OpenSans;
    font-weight: bold;
}

.soft-skill-loading {
    margin-left: 50%;
    transform: translateX(-50%);
    display:block;
}

.soft-skill-card {
    display:none;
    position:relative;
    overflow:hidden;
    margin-bottom:15px;
    padding:10px;
    user-select: none; 
}

    .soft-skill-card > div {
        padding: 10px;
        float: left;
        background-color: #f5f2f2;
        margin-right:10px;
        margin-bottom: 12px;
        border-radius:10px;
        box-shadow: 3px 3px 5px #AAAAAA;
    }

        .soft-skill-card > div > span {
            font-size: 18px;
            font-family: OpenSans;
            color: #333;
            font-weight: bold;
        }

.work-loading {
    margin-left: 50%;
    transform: translateX(-50%);
    display:block;
}

.work-space {
    padding:10px;
}

.work-card {
    display:none;
    position:relative;
    overflow:hidden;
    margin-bottom:15px;
}

.work-header {
    border-bottom: 1px solid rgba(51, 51, 51, 0.5);
    text-align:left;
}

.work-header > span {
    font-family: OpenSans;
    font-size: 20px;
    font-weight: bold;
    color: #000000;
    margin-top: 10px;
    margin-bottom: 10px;
}

.work-header > i {
    font-size:12px;
    color: #50538f;
    margin-left: 2px;
    cursor: pointer;
}

.work-body-first {
    padding-top: 10px;
    padding-bottom: 10px;
    text-align:left;
}

.work-body-first > i {
    font-size: 14px;
    color: #777777;
}

.work-body-first > span {
    font-family: OpenSans;
    font-size: 14px;
    color: #777777;
}

.work-body-first > span:nth-child(2) {
    font-weight: bold;
}

.work-body-first > span:nth-child(3) {
    font-style: italic;
    font-weight: 600;
}

.work-body {
    text-align: justify;
}

.work-body > span {
    font-family: OpenSans;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.contact-space {
    padding:10px;
}

.contact-header {
    border-bottom: 1px solid rgba(51, 51, 51, 0.5);
    text-align:left;
}

.contact-header > span {
    font-family: OpenSans;
    font-size: 20px;
    font-weight: bold;
    color: #000000;
    margin-top: 10px;
    margin-bottom: 10px;
}

.contact-body {
    padding: 20px;
    text-align:center;
}

.contact-body > div {
    position: relative;
    overflow:hidden;
    left: 50%;
    transform: translateX(-50%);
    max-width: 500px;
    width: 100%;
}

.loading2-contact {
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform: translate(-50%, 50%);
    width: 90px;
    height: 90px;
    display:none;
}

.contact-body-group-input {
    position:relative;
    margin-top:15px;
    text-align:left;
}

.send-success {
    text-align:center;
    font-family: OpenSans;
    font-size: 16px;
    color: #219718;
    display:none;
}

.contact-body-input {
    width:97%;
    height:35px;
    font-family: OpenSans;
    font-size: 14px;
    color: #333;
    padding-left:5px;
    padding-right:5px;
    border: 2px solid rgba(51, 51, 51, 0.5);
    border-radius:5px;
}

.contact-body-input-error {
    border: 2px solid red!important;
}

.contact-body-input-error::placeholder {
  color: red;
}

.contact-body-canvas {
    width:100%;
    height:40px;
}

textarea:focus, input:focus{
    outline: none;
}

.error-email-format {
    font-family: OpenSans;
    font-size: 12px;
    color: red;
    margin-left: 4px;
    display:none;
}


.project-loading {
    margin-left: 50%;
    transform: translateX(-50%);
    display:block;
}

.project-space {
    padding:10px;
}

.project-card {
    display:none;
    position:relative;
    overflow:hidden;
    margin-bottom:15px;
}

.project-header {
    border-bottom: 1px solid rgba(51, 51, 51, 0.5);
    text-align:left;
}

.project-header > span {
    font-family: OpenSans;
    font-size: 20px;
    font-weight: bold;
    color: #000000;
    margin-top: 10px;
    margin-bottom: 10px;
}

.project-header > i {
    font-size:12px;
    color: #50538f;
    margin-left: 2px;
    cursor: pointer;
}

.project-body-first {
    padding-top: 10px;
    padding-bottom: 10px;
    text-align:left;
}

.project-body-first > i {
    font-size: 14px;
    color: #777777;
}

.project-body-first > span {
    font-family: OpenSans;
    font-size: 14px;
    color: #777777;
}

.project-body-first > span:nth-child(2) {
    font-weight: bold;
}

.project-body-first > span:nth-child(3) {
    font-style: italic;
    font-weight: 600;
}

.project-body {
    text-align: justify;
}

.project-body > span {
    font-family: OpenSans;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.download-bodyMainDiv {
    position:relative;
    top:52px;
    overflow:hidden;
}

.download-loading {
    position:relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display:block;
}

.download-bodyMain {
    position:relative;
    overflow-y:auto;
    overflow-x:hidden;
    background-color:#2e2e33;
    padding-top:15px;
}

.download-bodyMain-container {
    width:100%;
    max-width:900px;
    margin-left:auto;
    margin-right:auto;
    background-color:#FFFFFF;
}

.header-cv {
    background-color:#404040;
}

.header-cv > div {
    padding:15px;
    display:flex;
}

.header-cv > div > div {
    padding:5px;
}

.header-cv > div > div:nth-child(2) {
    display:flex;
    flex-direction:column;
    flex-grow: 4;
}

.header-cv > div > div:nth-child(2) > div {
    padding: 10px;
    flex: 50%;
}

.header-cv > div > div:nth-child(2) > div:first-child > span {
    position:relative;
    top:50%;
    transform:translateY(-50%);
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 30px;
    color: #FFFFFF;
    font-weight:600;
}

.header-cv > div > div:nth-child(2) > div:last-child > span {
    position:relative;
    top:20%;
    transform:translateY(-50%);
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 23px;
    color: #ccc8ca;
}

.header-cv > div > div:nth-child(3) {
    display:flex;
    flex-direction:column;
    flex-grow: 2;
}

.header-cv > div > div:nth-child(3) > div {
    display:flex;
    flex: 50%;
}

.header-cv > div > div:nth-child(3) > div > div:first-child {
    width: 35px;
    padding: 5px;
}

.header-cv > div > div:nth-child(3) > div > div:first-child > div {
    border-radius:30px;
    width: 30px;
    height: 30px;
    border:1px solid #FFFFFF;
    margin-left: 50%;
    transform: translateX(-50%);
}

.header-cv > div > div:nth-child(3) > div > div:first-child > div > i {
    position:relative;
    left: 50%;
    top:50%;
    transform: translate(-50%, -50%);
    font-size:14px;
    color:#FFFFFF;
}

.header-cv > div > div:nth-child(3) > div > div:last-child {
    line-height:0px;
}

.header-cv > div > div:nth-child(3) > div > div:last-child > span {
    position:relative;
    top:50%;
    transform: translateY(-50%);
    font-size:14px;
    color:#FFFFFF;
}

.header-photo > img {
    width:130px;
    height:130px;
    border-radius:130px;
}

.body-cv {
    padding:15px;
}

.body-cv-item {
    width:100%;
}

.body-cv-sector {
    padding:10px;
    border-bottom: 1px solid rgba(51, 51, 51, 0.5);
}

.body-cv-sector > span {
    font-family: OpenSans;
    font-size: 18px;
    font-weight: bold;
    color:#458a5c;
}

.body-cv-sector-skills {
    padding:10px;
}

.body-cv-sector-skills > div {
    margin-top:5px;
    display:flex;
}

.body-cv-sector-skills > div > div {
    font-family: OpenSans;
    color: #333;
    font-size: 15px;
    flex:50%;
}

.body-cv-sector-certifications {
    padding:10px;
}

.body-cv-sector-certifications > div {
    margin-top:5px;
}

.body-cv-sector-certifications > div > span {
    font-family: OpenSans;
    color: #333;
    font-size: 15px;
}

.body-cv-sector-language {
    padding:10px;
}

.body-cv-sector-language > div {
    text-align: justify;
    font-family: OpenSans;
    margin-top:5px;
    display:flex;
}

.body-cv-sector-language > div > div:first-child {
    width:100px;
    text-align:right;
    padding-right:5px;
    font-weight:bold;
    color: #333333;
    font-size: 14px;
}

.body-cv-sector-language > div > div:last-child {
    font-weight:600;
    color: #777777;
    font-size: 15px;
}

.body-cv-sector-summary {
    text-align: justify;
    font-family: OpenSans;
    font-size: 14px;
    padding:10px;
    color: #333;
}

.body-cv-sector-item {
    padding:10px;
}

.body-cv-sector-item-title {
    padding-left:2px;
    font-family: OpenSans;
    font-size: 16px;
    font-weight: bold;
    color: #444444;
}

.body-cv-sector-item-title::before {
  content: "\2022"; 
  color: #333;
  display: inline-block; 
  width: 1em;
}

.body-cv-sector-item-subtitle {
    padding-left:10px;
    padding-top:5px;
}

.body-cv-sector-item-subtitle > span:first-child {
    font-family: OpenSans;
    font-size: 14px;
    font-weight: bold;
    color: #777777;
}

.body-cv-sector-item-subtitle > span:last-child {
    font-family: OpenSans;
    font-size: 14px;
    font-style: italic;
    font-weight: 600;
    color: #777777;
}

.body-cv-sector-item-subtitle::before {
  content: "\25AA"; 
  color: #666666;
  display: inline-block; 
  width: 1em;
}

.body-cv-sector-item-summary {
    padding-left:25px;
    padding-top:5px;
}

.body-cv-sector-item-summary > span {
    font-family: OpenSans;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    text-align: justify;
}

@media print {
    .header-cv {
        background-color:#404040!important;
        -webkit-print-color-adjust: exact;
    }

    .header-photo > img {
        width:100px;
        height:100px;
        border-radius:100px;
    }

    .header-cv > div > div:nth-child(2) > div:first-child > span {
        font-size: 18px;
    }

    .header-cv > div > div:nth-child(2) > div:last-child > span {
        font-size: 15px;
    }

    .header-cv > div > div:nth-child(3) > div > div:first-child > div > i {
        font-size:13px;
    }

    .header-cv > div > div:nth-child(3) > div > div:last-child > span {
        font-size:13px;
    }
}

@media screen and (max-width: 890px) {
    .download-bodyMain {
        padding:15px;
    }

    .download-bodyMain-container {
        width:100%;
        max-width:initial;
        margin-left:initial;
        margin-right:initial;
    }
}

@media not all and (pointer: coarse) {
    .iconMainDiv > div:hover {
        width:140px;
    }

    .iconMainDiv > div:hover > span {
        opacity:1;
    }
}

@media screen and (max-width: 460px) {
    .headerTitleMainDiv {
        font-size:1.4em;
    }

    .iconMainDiv {
        right:10px;
    }

    .navMenu {
        position:absolute;
        top:0px;
        left:0px;
        float:initial;
        width:100%;
        z-index:1024;
    }

    .role > span {
        font-size: 23px;
    }

    .card {
        min-width:100%;
    }

    .summary > div:first-child {
        display: initial!important;
        vertical-align: initial;
        width:100%;
        height:180px;
    }

    .summary > div:first-child > div {
        position:relative;
        left:50%;
        transform:translate(-50%);
    }

    .summary > div:last-child {
        max-width:100%;
        display: initial!important;
        vertical-align: initial!important;
        padding:10px;
    }

    .profile-space {
        padding:initial;
        padding-top:10px;
        padding-bottom:10px;
    }

    .profile {
        padding:initial;
        padding-top:10px;
        padding-bottom:10px;
        padding-right:10px;
    }

    .profile > div:first-child {
        font-size: 40px;
        line-height:70px;
        width:70px;
    }

    .caption span.border {
      font-size: 35px;
    }

    .profile-space-btn {
        height:110px;
    }

    .col1-profile-space-btn {
        height:30%!important;
    }

    .col2-profile-space-btn {
        height:70%!important;
    }

    .profile > div:last-child > div:first-child > span {
        font-size: 16px;
    }

    .profile > div:last-child > div:last-child > span {
        font-size:12px;
    }

    .contact-body-input {
        width:95%;
    }
}

@media screen and (max-width: 320px) {
    .headerTitleMainDiv {
        font-size:1.2em;
    }

    .caption span.border {
      font-size: 30px;
    }
}