* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}
body{
    width:100%;
    position:absolute;
    top:0;
    left:0;
    margin:0;
    overflow-x: hidden;
    height:100%;
    padding:0;
    background:#06286c;
    color:#1b262c;
    font-family: 'Montserrat', sans-serif;
    font-size:22px;
    line-height:1.4;
    font-weight:600
}
body.home{
    height:auto;
    min-height:100vh;
    font-size:19px
}
a, a:hover, a:focus {
    text-decoration:none;
    transition:all 0.3s ease
}
h2,.h2{
    font-size:38px;
    margin:0 0 10px
}
#wrapper,#page-wrapper,#page-wrapper .toplink{
    width:100%;
    height:auto;
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:flex;
    align-items:center;
    justify-content:center
}
#wrapper{
    min-height:100%
}
body.home #wrapper{
    background:url("../img/vcard-bg.jpg");
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    min-height:100vh;
    padding:0 30px
}
#page-wrapper{
    width:80%;
    max-width:1100px;
    flex-direction:column;
    height:auto;
    padding:50px 0
}
#page-wrapper .left,#page-wrapper .right,#page-wrapper .images{
    width:100%;
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column
}
#page-wrapper .images img{
    max-width:240px;
    height:auto;
    margin:30px 50px
}
#page-wrapper .right,#page-wrapper .images{
    flex-direction:row
}
#page-wrapper .left a,#page-wrapper .right a,#page-wrapper .left span,#page-wrapper .right span{
    color:#fff;
    margin:10px 0;
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:flex;
    align-items:center
}
#page-wrapper .left a:hover,#page-wrapper .right a:hover,#page-wrapper .left a:focus,#page-wrapper .right a:focus{
    color:#157ae4
}
#page-wrapper .left i,#page-wrapper .right i{
    color:#157ae4;
    margin-right:15px;
    top:1px;
    position:relative;
    font-size:24px
}
#page-wrapper .toplink{
    width:auto;
    height:auto;
    justify-content:flex-end;
    margin:0 0 0 auto;
    position:relative;
    top:0
}
#page-wrapper .toplink:hover{
    top:-10px
}
#page-wrapper img.logo{
    max-width:150px;
    height:auto
}
.container-fluid{
    background:#fff;
    border-radius:20px;
    -webkit-box-shadow: 0px 5px 15px 0px rgb(0 0 0 / 18%);
    -moz-box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.18);
    box-shadow: 0px 5px 15px 0px rgb(0 0 0 / 18%);
    transition: all .3s ease;
    width:100%;
    margin-top:35px;
    padding:0!important
}
.container-fluid .header,.container-fluid .content{
    background:#007aec;
    padding:30px 40px;
    border-radius:20px 20px 0 0;
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    position:relative
}
.container-fluid .header{
    z-index:2
}
.container-fluid .header .photo{
    background:#9ea4a7 url("../img/user-2x.png");
    background-size:cover;
    background-position:center center;
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border-radius:100%;
    width:200px;
    height:200px;
    position:absolute;
    left:40px;
    top:calc(50% - 100px)
}
.container-fluid .header .photo img{
    width:200px;
    height:auto;
    min-width:200px;
    min-height:200px
}
.container-fluid .header .links,.container-fluid .header .links a,.container-fluid .header .links a i{
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    color:#fff
}
.container-fluid .header .links{
    gap:0 30px
}
.container-fluid .header .links a{
    text-align:center;
    justify-content:center;
    flex-direction:column;
    color:#fff
}
.container-fluid .header .links a:hover,.container-fluid .header .links a:focus{
    color:#06286c
}
.container-fluid .header .links a i{
    border-radius:8px;
    width:50px;
    height:50px;
    font-size:25px;
    justify-content:center;
    background:#fff;
    color:#007aec;
    transition:all .3s ease;
    font-weight:300
}
.container-fluid .header .links a:hover i,.container-fluid .header .links a:focus i{
    background:#06286c;
    color:#fff
}
.container-fluid .header .links a span{
    margin-top:7.5px;
    font-weight:600;
    line-height:1;
    font-size:14px
}
.container-fluid .content{
    background:#fff;
    border-radius:0 0 20px 20px;
    justify-content:stretch;
    padding:20px 0;
    flex-direction:column
}
.container-fluid .content .details{
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    flex-direction:column;
    padding:40px;
    border-bottom:2px solid #e2e4e4;
    width:100%
}
.container-fluid .content .details:last-child{
    border-bottom:none
}
.container-fluid .content .details.twocol{
    flex-direction:row;
    align-items:stretch
}
.container-fluid .content .details.twocol .column{
    width:50%
}
.container-fluid .content .details .column,.container-fluid .content .details span,.container-fluid .content .details span label{
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    flex-direction:column
}
.container-fluid .content .details .column.vertmid{
    align-items:center
}
.container-fluid .content .details span{
    margin:0 0 25px;
    width:100%;
    flex-direction:row;
    justify-content:stretch;
    align-items:flex-start
}
.container-fluid .content .details.twocol span{
    margin:0 0 10px
}
.container-fluid .content .details span:last-child{
    margin:0
}
.container-fluid .content .details span label{
    flex-direction:row;
    width:40%;
    flex-basis:40%;
    justify-content:flex-start;
    align-items:center
}
.container-fluid .content .details span i{
    font-size:28px;
    margin-right:20px;
    width:30px;
    color:#007aec;
    font-weight:300
}
.container-fluid .content img{
    max-width:250px;
    width:auto;
    height:auto;
    max-height:80px;
    margin:0 0 0 auto
}
footer,footer p{
    width:100%;
    padding:40px 40px 0;
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    color:#fff;
    font-size:15px;
    font-weight:600;
    text-align:center
}
footer p{
    padding:0;
    margin:0
}
footer p a{
    margin:10px 0 0
}
footer img{
    max-width:180px;
    height:auto;
    margin-bottom:10px
}
footer span{
    margin:10px 0 0
}
footer a{
    color:#fff
}
footer a:hover,footer a:focus{
    color:#007aec
}
@media only screen and (max-width: 900px){
    body{
        font-size:18px
    }
    h2, .h2 {
        font-size:32px;
        margin:0 0 5px
    }
    #page-wrapper{
        width:90%;
        padding:40px 0
    }
    #page-wrapper img.logo {
        max-width:140px
    }
    .container-fluid .header .photo{
        width:180px;
        height:180px;
        top:calc(50% - 90px)
    }
    .container-fluid .header .photo img{
        width:180px;
        min-width:180px;
        min-height:180px
    }
    .container-fluid .header .links a i {
        width:40px;
        height:40px;
        font-size:20px
    }
    .container-fluid .header .links a span{
        font-size:13px
    }
    .container-fluid .content{
        padding:15px 0
    }
    .container-fluid .content .details{
        padding:30px 40px
    }
    .container-fluid .content .details span{
        margin:0 0 20px
    }
    .container-fluid .content .details span i {
        font-size:24px;
        margin-right:15px;
        width:26px
    }
    .container-fluid .content img {
        max-width:210px
    }
    .container-fluid .content .details.twocol span{
        margin:0 0 5px
    }
    footer{
        padding:30px 40px 0;
        font-size:14px
    }
    footer img {
        max-width:150px
    }
}
@media only screen and (max-width: 680px){
    body{
        font-size:17px
    }
    h2, .h2 {
        font-size:30px
    }
    #page-wrapper{
        width:90%;
        padding:40px 0
    }
    #page-wrapper img.logo {
        max-width:125px
    }
    .container-fluid{
        margin-top:25px
    }
    .container-fluid .header{
        padding:25px 20px
    }
    .container-fluid .header .photo{
        width:140px;
        height:140px;
        top:calc(50% - 70px);
        left:20px
    }
    .container-fluid .header .photo img{
        width:140px;
        min-width:140px;
        min-height:140px
    }
    .container-fluid .header .links {
        gap:0 20px
    }
    .container-fluid .header .links a i {
        width:35px;
        height:35px;
        font-size:19px
    }
    .container-fluid .header .links a span{
        font-size:12px
    }
    .container-fluid .content{
        padding:15px 0
    }
    .container-fluid .content .details{
        padding:25px 20px
    }
    .container-fluid .content .details span i {
        margin-right:10px
    }
    .container-fluid .content .details.twocol{
        flex-direction:column
    }
    .container-fluid .content .details.twocol .column,.container-fluid .content .details span label{
        width:100%;
        flex-basis:100%;
        justify-content:center;
        align-items:center
    }
    .container-fluid .content .details span{
        margin:0 0 15px;
        flex-direction:column;
        align-items:center;
        gap:5px 0;
        text-align:center
    }
    .container-fluid .content img {
        max-width:200px;
        margin:15px 0 0
    }
    footer{
        padding:25px 30px 0;
        font-size:13px
    }
    footer img {
        max-width:140px
    }
    #page-wrapper .images{
        flex-direction:column;
        margin-bottom:15px
    }
    #page-wrapper .images img{
        margin:15px 40px
    }
}
@media only screen and (max-width: 420px){
    body{
        font-size:16px
    }
    h2, .h2 {
        font-size:26px
    }
    #page-wrapper img.logo {
        max-width:100px
    }
    .container-fluid .header .photo{
        width:125px;
        height:125px;
        top:calc(50% - 62.5px)
    }
    .container-fluid .header .links a i {
        width:30px;
        height:30px;
        font-size:18px
    }
    .container-fluid .content img {
        max-width:180px;
        max-height:60px
    }
}