@charset "UTF-8";
/* CSS Document */
* {
    box-sizing: border-box;    
    font-family: 'Qualion-Book';
    font-weight: normal; 
}
html {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    font-family: 'Qualion-Book';
    font-weight: normal; 
    overflow-x: hidden;
}
body {
    min-height: 100%;
    width: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
    margin: 0px;
    overflow-x: hidden;
}
html, body, p, th, td, li, dd, dt {
 }
 h1, h2, h3, h4, h5, h6 {
    font-family: 'Qualion-DemiBold'; 
    font-weight: normal; 
}
 h1 { font-size: 1.5rem; }
 h2 { font-size: 1.2rem; }
 h3 { font-size: 1.0rem; }
 h4 { font-size: 0.9rem; }
 h5 { font-size: 0.8rem; }
 h6 { font-size: 0.7rem; }
 a:link { color: #000000; }
 a:visited { color: #ff40b4; }
 a:hover { color: #ff40b4; }
 a:active { color: #38d430; }
p {
    font-size: 1rem;
    line-height: 1.5rem;
}
footer {
    min-height: 100%;
}
footer p {
    font-size: 0.8rem;
    padding-left: 10px;
}
footer a {
    text-decoration: none;
}
h2{
    color: #38d430;
    line-height: 1.5rem;
    margin-bottom: 4px;
}
.italic {
    font-style: italic;
}
.bold {
    font-family: 'Qualion-DemiBold'; 
    font-weight: normal; 
}
.bg {
    background-color:rgba(255, 66, 180, 0.20);
    padding: 5px 1px 1px 1px;
}
header {
}
.logo {
    display: block;
    margin: 0 auto;
    height: 70%;
    max-width: 70%;
    padding-top: 40px;
}

.intro {
    font-size: 1.5rem;
    color: #ff40b4;
    text-align: left;
}
.ton {
    width: 100%;
    max-width: 500px;
    min-wid: 350px;
    height:100%;
}
ul {
    list-style-image: url("../images/arrow.svg");
    margin-top: 0px;
    padding-left: 16px;
}
.privacy p {
    margin-top: 0px;
}
.container {
    display: grid;
    grid-template-columns: [c1] 1fr [c2] 10fr [c3] 1fr [c4];
    grid-template-rows: [r1] auto [r2] auto [r3] auto [r4] auto [r5];
    grid-gap: 20px;
    align-content: start;
    align-items: start;
}
.item-1 {
    grid-column: c2 / c3;
    grid-row: r1 / r2;
}

.item-2 {
    grid-column: c2 / c3;
    grid-row: r2 / r3;
}
.item-2 p {
    margin-bottom: 0px;
}
.item-3 {
    grid-column: c2 / c3;
    grid-row: r3 / r4;
}
.item-4 {
    grid-column: c2 / c3;
    grid-row: r4 / r5;
}
.gradientText img {
    max-width: 80%;
}

/* portfolio*/
    
.portfolio {
    display: grid;
    grid-template-columns: [c1] 1fr [c2] 10fr [c3] 1fr [c4];
    grid-template-rows: [r1] auto [r2] auto [r3];
    grid-gap: 20px;
    }
.portfolio {
    grid-template-areas: 
    ". title ."
    ". a ."
    ". b ."
    ". c ."
    ". d ."
    ". e ."
    ". f ."
    ". g ."
    ". h ."
    ". i ."
    ". j ."
    ". k ."
    ". l ."    
    ". m ."
    ". n ."
    ". o ."
    ". p ."    
    ". q ."
    ". r ."
    ". s ."
    ". t ."
    ". u ."
    ". v ."
    ". w ."
    ". x ."
    ". y ."
    ". z ."
    ". aa ."
    ". bb ."
    ". cc ."
    ". dd ."
    ". ee ."
    ". ff ."
    ". gg ."
    ". hh ."
    ". ii .";
    place-items: start;
    height: 0%;
    margin-top: 20px;
    }
.portfolio-item {
}
.portfolio-item-1 {
    grid-area: a;
    background-color: #ffffff;
}
.portfolio-item-2 {
    grid-area: b;
    background-color: #ffffff;
}
.portfolio-item-3 {    
    grid-area: c;
    background-color: #ffffff;
}
.portfolio-item-4 {
    grid-area: d;
    background-color: #ffffff;
}
.portfolio-item-5 {
    grid-area: e;
    background-color: #ffffff;
}
.portfolio-item-6 {
    grid-area: f;
    background-color: #ffffff;
}
.portfolio-item-7 {
    grid-area: g;
    background-color: #ffffff;
}
.portfolio-item-8 {
    grid-area: h;
    background-color: #ffffff;
}
.portfolio-item-9 {
    grid-area: i;
    background-color: #ffffff;
}
.portfolio-item-10 {
    grid-area: j;
    background-color: #ffffff;   
}
.portfolio-item-11 {
    grid-area: k;
    background-color: #ffffff;
}
.portfolio-item-12 {
    grid-area: l;
    background-color: #ffffff;
}
.portfolio-item-13 {
    grid-area: m;
    background-color: #ffffff;
}
.portfolio-item-14 {
    grid-area: n;
    background-color: #ffffff;
}
.portfolio-item-15 {
    grid-area: o;
    background-color: #ffffff;
}
.portfolio-item-16 {
    grid-area: p;
    background-color: #ffffff;
}
.portfolio-item-17 {
    grid-area: q;
    background-color: #ffffff;
}
.portfolio-item-18 {
    grid-area: r;
    background-color: #ffffff;
}
.portfolio-item-19 {
    grid-area: s;
    background-color: #ffffff;
}
.portfolio-item-20 {
    grid-area: t;
    background-color: #ffffff;
}
.portfolio-item-21 {
    grid-area: u;
    background-color: #ffffff;
}
.portfolio-item-22 {
    grid-area: v;
    background-color: #ffffff;
}
.portfolio-item-23 {
    grid-area: w;
    background-color: #ffffff;
}
.portfolio-item-24 {
    grid-area: x;
    background-color: #ffffff;
}
.portfolio-item-25 {
    grid-area: y;
    background-color: #ffffff;
}
.portfolio-item-26 {
    grid-area: z;
    background-color: #ffffff;
}
.portfolio-item-27 {
    grid-area: aa;
    background-color: #ffffff;
}
.portfolio-item-28 {
    grid-area: bb;
    background-color: #ffffff;
}
.portfolio-item-29 {
    grid-area: cc;
    background-color: #ffffff;
}
.portfolio-item-30 {
    grid-area: dd;
    background-color: #ffffff;
}
.portfolio-item-31 {
    grid-area: ee;
    background-color: #ffffff;
}
.portfolio-item-35 {
    grid-area: ff;
    background-color: #ffffff;
}
.portfolio-item-34 {
    grid-area: gg;
    background-color: #ffffff;
}
.portfolio-item-33 {
    grid-area: hh;
    background-color: #ffffff;
}
.portfolio-item-32 {
    grid-area: ii;
    background-color: #ffffff;
}
.portfolioPageTitle {
    grid-area: title;
    font-family: 'Qualion-Book';
	font-weight: normal;
    font-size: 1.5rem;
    color: #ff40b4;
    justify-self: start;
    padding-right: 0px;
    padding-top: 10px;
    margin-top: -20px;
}
.gradient_bottom {
    height: 10px;
    /* width: 100%;*/
    background-color: #38D430;
    background: linear-gradient(-90deg, #ff40b4, #38d430);
}
.portfolio-item h1 { 
    font-size: 1rem;
}
.portfolio-item p { 
    font-size: 1rem;
}
.client {
    display: grid;
    grid-template-columns:20px 10fr 20px;
    grid-template-rows:auto;
    grid-gap: 20px;
    grid-template-areas: 
    ". Pr ."
    ". a ."
    ". b ."
    ". c ."
    ". d ."
    ". e ."
    ". f ."
    ". g ."
    ". h ."
    ". i ."
    ". j ."
    ". k ."
    ". l ."
    ". m ."
    ". n ."
    ". o ."
    ". p ."
    ". q ."
    ". r ."
    ". s ."
    ". t ."
    ". u ."
    ". v ."
    ". w ."
    ". x ."
    ". y ."
    ". z ."
    ". aa ."
    ". bb ."
    ". cc ."
    ". dd ."
    ". ee ."
    ". ff ."
    ". gg ."
    ". hh ."
    ". ii .";
    justify-items: center;
    margin-top: 6rem;
}
.project {
    grid-area: Pr;
}
.client-item-a {
    grid-area: a;
}
.client-item-b {
    grid-area: b;
}
.client-item-c {
    grid-area: c;
}
.client-item-d {
    grid-area: d;
}
.client-item-e {
    grid-area: e;
}
.client-item-f {
    grid-area: f;
}
.client-item-g {
    grid-area: g;
}
.client-item-h {
    grid-area: h;
}
.client-item-i {
    grid-area: i;
}
.client-item-j {
    grid-area: j;
}
.client-item-k {
    grid-area: k;
}
.client-item-l {
    grid-area: l;
}
.client-item-m {
    grid-area: m;
}
.client-item-n {
    grid-area: n;
}
.client-item-o {
    grid-area: o;
}
.client-item-p {
    grid-area: p;
}
.client-item-q {
    grid-area: q;
}
.client-item-r {
    grid-area: r;
}
.client-item-s {
    grid-area: s;
}
.client-item-t {
    grid-area: t;
}
.client-item-u {
    grid-area: u;
}
.client-item-v {
    grid-area: v;
}
.client-item-w {
    grid-area: w;
}
.client-item-x {
    grid-area: x;
}
.client-item-y {
    grid-area: y;
}
.client-item-z {
    grid-area: z;
}
.projectMargin {
    margin-left: 0px;
    margin-right: 0px;
}
figure img {
        max-width: 100%;
}
.overlay {
    overflow-y: scroll;
}
.gallery_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
h1.clientName {
    font-size: 1.4rem;
    font-family: 'Qualion-Book';
	font-weight: normal;
    color: #ffffff;
    background-color: #38d430;
    padding: 7px 3px 4px 3px;
    margin-top: 0px;
    line-height: 1.4rem;
}
.textBox p {
    display: inline-block;
}
.textBox h1 {
    display: inline-block;
}
p.clientDescription {
    color: #ffffff;
    background-color: #ff40b4;
    padding: 2px 3px 0px 3px;
    margin-top: 0px;
    width: auto;
}
.projectDescription {
    padding-left: 7%;
    padding-right: 0%;
    margin-bottom: 0px;
    max-width: 800px;
}

/*portfolio END*/

.resumePrivacyContainer {
    display: grid;
    grid-template-columns: [c1] 1fr [c2] 10fr [c3] 1fr [c4];
    grid-template-rows: [r1] auto [r2] auto [r3];
    grid-gap: 20px;
}
.contactFormContainer {
    display: grid;
    grid-template-columns: [c1] 1fr [c2] 10fr [c3] 1fr [c4];
    grid-template-rows: [r1] 40px [r2] auto [r3];
    grid-gap: 20px;
}
.resume, .privacy, .contact {
    grid-column: c2 / c3;
    grid-row: r2 / r3;
}
.resumePageTitle,.privacyPageTitle,.contactPageTitle, .pageTitleWithoutBreak {
    justify-self: start;
}
.privacyPageTitle {
    grid-column: c2 / c3;
    grid-row: r1 / r2;
    }
.pageTitleWithoutBreak, .resumePageTitle, .contactPageTitle {
    display: inline;
    grid-column: c2 / c3;
    grid-row: r1 / r2;
    font-family: 'Qualion-Book';
	font-weight: normal;
    font-size: 1.5rem;
    color: #ff40b4;
    justify-self: start;
    padding-right: 0px;
    padding-top: 10px;
}
.privacyPageTitle {
    display: none;
}

/* .gradient_text {
font-family: 'Qualion-DemiBold';
font-size: 1.5rem;
text-align: right;
background: -webkit-linear-gradient(180deg, #ff40b4, #38d430);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
} */



/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

.container {
    display: grid;
    grid-template-columns: [c1] 1fr [c2] 10fr [c3] 1fr [c4];
    grid-template-rows: [r1] auto [r2] auto [r3] auto [r4] auto [r5];
    grid-gap: 20px;
    align-content: start;
    align-items: start;
}
      
.resumePrivacyContainer,.contactFormContainer {
    display: grid;
    grid-template-columns: [c1] 1fr [c2] 10fr [c3] 1fr [c4];
    grid-template-rows: [r1] auto [r2] auto [r3];
    grid-gap: 20px;
}     
}

@media (min-device-width: 668px) and (max-width: 767px) {
    
.contactFormContainer {
    display: grid;
    grid-template-columns: [c1] 1fr [c2] 10fr [c3] 1fr [c4];
    grid-template-rows: [r1] 30px [r2] auto [r3];
    grid-gap: 20px;
}
}

/* 

@media (max-width: 480px) {

#menuToggle {
    top: -85px !important;
}
}

*/



@media (min-width: 481px) and (max-width: 767px) {
  
.portfolio {
    display: grid;
    grid-template-columns: [c1] 1fr [c2] 5fr [c3] 5fr [c4] 1fr [c5];
    grid-template-rows: [r1] auto [r2] auto [r3];
    grid-gap: 20px;
}
.portfolio {
    grid-template-areas: 
    ". title title ."
    ". a b ."
    ". c d ."
    ". e f ."
    ". g h ."
    ". i j ."
    ". k l ."
    ". m n ."
    ". o p ."
    ". q r ."
    ". s t ."
    ". u v ."
    ". w x ."
    ". y z ."
    ". aa bb ."
    ". cc dd ."
    ". ee ff ."
    ". gg hh ."
    ". ii jj .";
    place-items: start;
    height: 0%;
    margin-top: 20px;
}
}




@media (min-width: 768px) {
.container {
    display: grid;
    grid-template-columns: [c1] 1fr [c2] 5fr [c3] 4fr [c4] 2fr [c5];
    grid-template-rows: [r1] auto [r2] auto [r3] auto [r4];
    grid-gap: 20px;
    align-content: start;
}
.item-1 {
    grid-column: c2 / c3;
    grid-row: r1 / r2;
    align-self: end;
}
.item-2 {
    grid-column: c3 / c4;
    grid-row: r1 / r2;
}
.item-2 p {
    margin-bottom: 0px;
}
.item-3 {
    grid-column: c3 / c4;
    grid-row: r2 / r3;
}
.item-4 {
    display: grid;
    grid-column: c2 / c3;
    grid-row: r3 / r4;
}
.item-4 img {
    justify-self: end;
    }
.intro {
    font-size: 1.5rem;
    color: #ff40b4;
    text-align: right;
}
.ton {
    width: 100%;
    max-width: 500px;
    height: 100%;
}
.gradientText img {
    max-width: 100%;
}
.privacy p {
    margin-top: 0px;
}
.logo {
    display: block;
    margin: 0 auto;
    height: 100%;
    max-width: 100%;
    padding-top: 50px;
}
.resumePrivacyContainer,.contactFormContainer {
    display: grid;
    grid-template-columns: [c1] 3fr [c2] 30px [c3] 7fr [c4] 1fr [c5];
    grid-template-rows: [r1] auto [r2];
    grid-gap: 20px;
    align-content: start;
}
.privacyPageTitle {
    display: inline;
}
.privacyPageTitle, .resumePageTitle {
    grid-column: c1 / c2;
    grid-row: r1 / r2;
    font-family: 'Qualion-Book';
	font-weight: normal;
    font-size: 1.5rem;
    color: #ff40b4;
    justify-self: end;
    padding-right: 0px;
    padding-top: 10px;
}
.resume, .privacy, .contact {
    grid-column: c3 / c4;
    grid-row: r1 / r2;
}
.pageTitleWithoutBreak,.contactPageTitle {
    display: inline;
    grid-column: c1 / c2;
    grid-row: r1 / r2;
    font-family: 'Qualion-Book';
	font-weight: normal;
    font-size: 1.5rem;
    color: #ff40b4;
    justify-self: end;
    padding-right: 0px;
    padding-top: 10px;
}
.portfolio {
    display: grid;
    grid-template-columns: 2fr 30px 3fr 3fr 3fr 1fr;
    grid-template-rows:auto;
    grid-gap: 20px;
    grid-template-areas: 
    "title . a b c ."
    ". . d e f ."
    ". . g h i ."
    ". . j k l ."
    ". . m n o ."
    ". . p q r ."
    ". . s t u ."
    ". . v w x ."
    ". . y z aa ."
    ". . bb cc dd ."
    ". . ee ff gg ."
    ". . hh ii jj .";
    place-items: start;
    height: 0%;
    margin-top: 20px;
    }
.portfolioPageTitle {
    justify-self: end;   
}
.pageTitleWithoutBreak {
    display: none;
}
}



@media (min-width: 1025px) {
    
.resumePrivacyContainer {
    display: grid;
    grid-template-columns: [c1] 2fr [c2] 30px [c3] 6fr [c4] 3fr [c5];
    grid-template-rows: [r1] auto [r2];
}
.privacyPageTitle, .resumePageTitle {
    grid-column: c1 / c2;
    grid-row: r1 / r2;
    font-family: 'Qualion-Book';
	font-weight: normal;
    font-size: 1.5rem;
    color: #ff40b4;
    justify-self: end;
    padding-right: 0px;
    padding-top: 10px;
}
}



@media (min-width: 1281px) {

.portfolio {
    display: grid;
    grid-template-columns: 2fr 50px 3fr 3fr 3fr 3fr 1fr;
    grid-template-rows:auto;
    grid-gap: 20px;
    grid-template-areas: 
    "title . a b c d ."
    ". . e f g h ."
    ". . i j k l ."
    ". . m n o p ."
    ". . q r s t ."
    ". . u v w x ."
    ". . y z aa bb ."
    ". . cc dd ee ff ."
    ". . gg hh ii jj .";
    place-items: start;
    height: 0%;
    margin-top: 20px;
    }
    
/* portfolio*/
    
.client {
    display: grid;
    grid-template-columns:2fr 8fr 2fr;
    grid-template-rows:auto;
    grid-gap: 20px;
    grid-template-areas: 
    ". Pr ."
    ". a ."
    ". b ."
    ". c ."
    ". d ."
    ". e ."
    ". f ."
    ". g ."
    ". h ."
    ". i ."
    ". j ."
    ". k ."
    ". l ."
    ". m ."
    ". n ."
    ". o ."
    ". p ."
    ". q ."
    ". r ."
    ". s ."
    ". t ."
    ". u ."
    ". v ."
    ". w ."
    ". x ."
    ". y ."
    ". z ."
    ". aa ."
    ". bb ."
    ". cc ."
    ". dd ."
    ". ee ."
    ". ff ."
    ". gg ."
    ". hh ."
    ". ii .";
    justify-items: center;
    margin-top: 12rem;
}
.project {
    grid-area: Pr;
}
.client-item-a {
    grid-area: a;
}
.client-item-b {
    grid-area: b;
}
.client-item-c {
    grid-area: c;
}
.client-item-d {
    grid-area: d;
}
.client-item-e {
    grid-area: e;
}
.client-item-f {
    grid-area: f;
}
.client-item-g {
    grid-area: g;
}
.client-item-h {
    grid-area: h;
}
.client-item-i {
    grid-area: i;
}
.client-item-j {
    grid-area: j;
}
.client-item-k {
    grid-area: k;
}
.client-item-l {
    grid-area: l;
}
.client-item-m {
    grid-area: m;
}
.client-item-n {
    grid-area: n;
}
.client-item-o {
    grid-area: o;
}
.client-item-p {
    grid-area: p;
}
.client-item-q {
    grid-area: q;
}
.client-item-r {
    grid-area: r;
}
.client-item-s {
    grid-area: s;
}
.client-item-t {
    grid-area: t;
}
.client-item-u {
    grid-area: u;
}
.client-item-v {
    grid-area: v;
}
.client-item-w {
    grid-area: w;
}
.client-item-x {
    grid-area: x;
}
.client-item-y {
    grid-area: y;
}
.client-item-z {
    grid-area: z;
}
figure img {
        max-width: 100%;
}
.overlay {
        overflow-y: scroll;
}
.gallery_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.clientDescription {
    color: #ffffff;
    background-color: #ff40b4;
    padding: 2px 3px 0px 3px;
    margin-top: 0px;
}
.projectDescription {
    padding-left: 7%;
    padding-right: 0%;
    margin-bottom: 0px;
    max-width: 800px;
}
    
/*portfolio END*/

/* resume  privacy contact */

.resumePrivacyContainer {
    display: grid;
    grid-template-columns: [c1] 2fr [c2] 50px [c3] 6fr [c4] 3fr [c5];
    grid-template-rows: [r1] auto [r2];
    grid-gap: 20px;
    align-content: start;
}
.contactFormContainer {
    display: grid;
    grid-template-columns: [c1] 2fr [c2] 50px [c3] 6fr [c4] 50px [c5] 2fr [c6];
    grid-template-rows: [r1] auto [r2];
    grid-gap: 20px;
    align-content: start;
}
.resumePageTitle, .contactPageTitle, .privacyPageTitle {
    grid-column: c1 / c2;
    grid-row: r1 / r2;
}
.resume, .contact {
    grid-column: c3 / c4;
    grid-row: r1 / r2;
}

/* resume  privacy contact END */

/* home */
    
.item-3 a {
    text-decoration: none;
}

    /* home END */
}


@media (min-width: 1367px) {

.gradientText img {
    max-width: 70%;
}
}


@media (min-width: 1900px) {

.gradientText img {
    max-width: 60%;
}
}