@font-face {
    font-family: 'P22Mackinac-Medium';
    src: url("https://dharmikspatel.github.io/assets/P22Mackinac-Medium_6.otf");
}
@font-face {
    font-family: 'Avenir-Normal';
    src: url("https://dharmikspatel.github.io/assets/AvenirNextLTPro-Regular.otf");
}
/* * {
    border: 1px dashed red;
} */
.contactIcon {
    font-size: 1.6em;
    padding-right: 10px;
    color: #fff3f3;
    cursor:pointer;
    

}
.contact:last-child {
    padding-right: 0px;
}
.contact {
    margin-top: -18px;
    margin-bottom: -10px;
}
br {
    border: 1px dashed green;
}
.startImages {
    position: relative;
    margin-top: 5%;
    /* border: 1px dashed red; */

}
.icon {
    position: absolute;
    border-radius: 50%;
    /* border: 1px dashed red; */
}
.icon.mainI {
    top: 41.3%;
    font-size: 2em;
    color: #fff3f3;
    cursor:pointer;
}
.icon.mainI.left {
    left: 21%;
}
.icon.mainI.right {
    right: 21%;
    border-radius: 0;
}
.icon.mainI2 {
    font-size: 2em;
    color: #fff3f3;
    cursor:pointer;
}
/* .icon.mainI2.left {
    left: 22%;
}
.icon.mainI2.right {
    right: 22%;
}
.icon.mainI2.top {
    top: 19%;
}
.icon.mainI2.bot {
    bottom: 21%;
} */
.icon.mediumI {
    width: 4%;
    height: 0;
    padding-top: 4%;
    background-color: #cde0e1;
}
.icon.mediumI.left {
    left: 24.5%;
}
.icon.mediumI.right {
    right: 24.5%;
}
.icon.mediumI.top {
    top: 27%;
}
.icon.mediumI.bot {
    bottom: 27%;
}
.icon.smallI{
    width: 2%;
    height: 0;
    padding-top: 2%;
    background-color: #fff3f3;
}
.icon.smallI.left {
    left: 28%;
}
.icon.smallI.right {
    right: 28%;
}
.icon.smallI.top {
    top: 17.5%;
}
.icon.smallI.bot {
    bottom: 17.5%;
}
.avatar {
    position: relative;
    width: 30%;
    margin: 0 auto;
    margin-top: 6%;
    /* border: 1px dashed red; */

}
.avatarImage {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 50%;
  }
.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
}
.avatar:hover .overlay {
    opacity: 1;
  }

button {
    border-radius: 10em;
    font-size: 14pt;
    font-family: 'P22Mackinac-Medium';
    width: 11em;
    height: 1.65em;
    border: 0;
    color: #5c7374;
    margin-bottom: .3em;
    cursor:pointer;

}
.b1{
    background-color: #cde0e1;
}
.b2{
    background-color: #fff3f3;
}

body {
    background-color: #87aaaa;  
}
p{
    font-size: 14pt;
    font-family: 'Avenir-Normal';
    color: #fff3f3;
}
span{
    font-size: 14pt;
    font-family: 'Avenir-Normal';
    color: #fff3f3;
}
h1{
    font-size: 30pt;
    font-family: 'P22Mackinac-Medium';
    font-weight: normal;
    color: #faeee0;
}
h2{
    font-size: 20pt;
    font-family: 'P22Mackinac-Medium';
    font-weight: normal;
    color: #faeee0;

}
.main {
    margin: 0;
    position: absolute;
    top: 0%;
    left: 50%;
    -ms-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
    
    text-align: center;
    /* backdrop-filter: blur(10px); */

}
.avatarParent{
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border: 1px dashed wheat;
    text-align: center;
}
.nav {
    margin-bottom: 10%;
}
* {
    /* border: 1px dashed red; */
}