/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/* Code begins here --- ---- ----- */
/* Code begins here --- ---- ----- */
/* Code begins here --- ---- ----- */


  /*------ GENERAL [s.gen] ------*/
  /*------ GENERAL ------*/
html {
    height: 100%;
    font-size: medium;
    -webkit-text-size-adjust: 100%;
}

body {
    height: 100%;
    background-color: rgb(240, 240, 240);
    line-height: 1.5;
}

header {
    padding: 20px 25px;
    margin: 0 auto;
    background-color: transparent;
    border-bottom: 20px solid #f57921;
}

main {
    width: 100vw;
    max-width: 100%;
    
/*
    ox-sizing: border-box;
    order: 2px solid #121212;
*/

media only screen and (max-width: 300px) {
    main {
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow-x: hidden;
    }
}    
    
/*    z-index: -1;*/
/*    position: relative;*/
/*    overflow-x: hidden;*/
}


        /*------ Main Content ------*/
     /* -------- Begins Here -------- */

/* [s.btn]  B  U  T  T  O  N  S  [s.buttons ] */
button {
    cursor: pointer;
    border-style: none;
    text-align: center;
    border-radius: 7px;
    color: white;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    word-spacing: 1.5px;    
    font-size: calc(13px + (19 - 13) * ((100vw - 300px) / (1600 - 300)));
    font-size: calc(18px + (24 - 18) * ((100vw - 300px) / (1600 - 300)));
    
    transition: all 0.23s ease-in-out 0s;
}

    /*  Btn #1: Hero Image */
#hero button {
    background-color: #183a98;
    border: 2px solid #0F2663;
    word-spacing: 3px;
    letter-spacing: 1.6px;
    line-height: 1.6;
/*    z-index: 900;*/
    cursor: pointer;
    padding: calc(21px + (34 - 21) * ((100vw - 300px) / (1920 - 300))) calc(20px + (55 - 20) * ((100vw - 300px) / (1920 - 300)));
}
#hero button:hover {
    background: #f57921;
    border: 2px solid #994407;
}
@media only screen and (max-width: 500px) {
    #hero button {
        width: 60%;
        min-width: 150px;
        padding-left: 0;
        padding-right: 0;
/*        font-size: 16px;*/
    }   
}
@media only screen and (max-width: 340px) {
    #hero button {
        width: 70%;
    }
}

    /*  Btn #2: Bootcamps */
#bootcamps .page-content .btn {
    cursor: pointer;
    text-transform: uppercase;
    text-decoration-line: none;
    border: none;
    font-weight: 600;
    letter-spacing: 0.025rem;
    letter-spacing: 3px;
    border-radius: 0;
    color: rgb(250,250,250);
    background: #183a98;
    background: #1E4AC3;
    background: #2252D8;
    
    font-size: 0.65rem;
    font-size: calc(10px + (13 - 10) * ((100vw - 300px) / (1920 - 300)));
    font-size: calc(13px + (15 - 13) * ((100vw - 300px) / (1920 - 300)));
}
#bootcamps .page-content .btn:hover {
    background-color: #183a98;
}
#bootcamps .page-content .btn:focus {
  outline: 1px dashed yellow;
  outline-offset: 3px;
}
#bootcamps .btn a {
    text-decoration: none;
    color: rgb(250,250,250);
}


#bootcamps .bootcamps_sub button {
    background: #f57921;
    border: 2px solid #994407;
    display: flex;
    align-items: center;
    font-weight: 800;
    
    padding: calc(30px + (58 - 30) * ((100vw - 300px) / (1920 - 300))) calc(20px + (44 - 20) * ((100vw - 300px) / (1920 - 300)));
}
#bootcamps .bootcamps_sub button:hover {
    background: #183a98;
    border: 2px solid #0C1D4D;
} 
@media only screen and (max-width: 500px) {
    #bootcamps .bootcamps_sub button {
        max-width: 90%;
        adding: calc(24px + (58 - 24) * ((100vw - 300px) / (1920 - 300))) calc(10px + (20 - 10) * ((100vw - 300px) / (500 - 300)));
    }
}

    /*  Btn #3: Collab-Driven  */
#collab_driven button {
    background: #183a98;
    border: 2px solid #0C1D4D;
    padding: calc(10px + (26 - 10) * ((100vw - 300px) / (1920 - 300))) calc(30px + (40 - 30) * ((100vw - 300px) / (1920 - 300)));
    padding: calc(18px + (26 - 18) * ((100vw - 300px) / (1920 - 300))) calc(30px + (40 - 30) * ((100vw - 300px) / (1920 - 300)));
}
#collab_driven button:hover {
    background: #153284;
    border: 2px solid #2252D8;
}


    /*  Btn #4: CTA_4  */
#cta_4 button {
    background: #183a98;
    border: 2px solid #0C1D4D;
    letter-spacing: 2px;
    padding: calc(10px + (34 - 10) * ((100vw - 300px) / (1920 - 300))) calc(30px + (70 - 30) * ((100vw - 300px) / (1920 - 300)));
    padding: calc(18px + (34 - 18) * ((100vw - 300px) / (1920 - 300))) calc(30px + (70 - 30) * ((100vw - 300px) / (1920 - 300)));
    padding: calc(22px + (34 - 22) * ((100vw - 300px) / (1920 - 300))) calc(30px + (70 - 30) * ((100vw - 300px) / (1920 - 300)));
}
#cta_4 button:hover {
    background: #153284;
    border: 2px solid #2252D8;
}
#cta_4 .cta4_sub {
    font-size: calc(9px + (20) * ((100vw - 300px) / (10000)));
 }
#cta_4 button {
    margin-top: 2.5em;
}


    /*  Btn #5: Final CTA  */
#final_cta_sub {
    font-size: calc(9px + (20) * ((100vw - 300px) / (10000))); 
}
#final_cta button {
    background: #f57921;
    border: 2px solid #994407;
    margin-top: 3.2em;
    word-spacing: 5px;
    letter-spacing: 7px;
    font-weight: 800;
    font-size: calc(18px + (30 - 18) * ((100vw - 300px) / (1600 - 300)));
    
    padding: calc(10px + (60 - 10) * ((100vw - 300px) / (1920 - 300))) calc(20px + (100 - 20) * ((100vw - 300px) / (1920 - 300)));
    padding: calc(22px + (46 - 22) * ((100vw - 300px) / (1920 - 300))) calc(20px + (80 - 20) * ((100vw - 300px) / (1920 - 300)));
}
#final_cta button:hover {
    background: #E6660B;
    border: 2px solid #F79753;
}
/* [ s.e.btns / s.e.buttons ] -------- -------- -------- -------- -------- -------- */


/* -------- -------- -------- -------- -------- -------- -------- -------- -------- */

    /*  Section Spacing [s.Spacing] */

    /*  Section Spacing [s.Spacing] */



 /* -- Tech Industry (bottom) -- */
#tech_industry .spacer .two.one {
    height: 0;
}
@media only screen and (max-width: 650px) {
    #tech_industry .spacer .two.one {
        height: 2em;
    }   
}


 /* -- Tech Skills (top) -- */
.spacer .two.two {
    height: 4em;
    height: 3em;
    height: 0;    
}
/*
@media only screen and (max-width: 670px) {
    .spacer .two.two {
        height: 0;
    }
}
*/

 /* Tech Skills -- Bootcamps */
.spacer .three {
    height: 7.6em;
}
@media only screen and (max-width: 1200px) {
    .spacer .three {
        height: 6em;
    }
}

 /* -- Collaboration-Driven -- */
.spacer .eight.two {
    background: #f57921;
    height: 8em;
    height: 5em;
    height: 4em;

    height: 6em;
    height: 7.5em;
}
.spacer .nine.one {
    background: #f57921;
    height: 8em;
    height: 0;
    height: 4.5em;    
    
    height: 7em;    
}
@media only screen and (max-width: 1300px) {
    .spacer .eight.two {
        height: 0;
    }
    .spacer .nine.one {
        height: 7.5em;
        height: 0;
        eight: 2.5em;
    }    
}

 /* -- Our Students -- */
.spacer .nine.two {
    height: 8em;
    height: 0;
    height: 3em;
    height: 4em;
    height: 4.5em;
    
    height: 5em;
}
.spacer .ten.one {
    height: 4em;
    height: 5em;
    height: 6.7em;
    height: 7em;
}
@media only screen and (max-width: 1300px) {
    .spacer .nine.two {
        height: 7em;
        eight: 4em;
        height: 6em;
    }
    .spacer .ten.one {
        height: 9em;
    }
}
@media only screen and (max-width: 767px) {
    .spacer .nine.two {
        height: 5em;
        padding-right: 2vw;
    }
}
@media only screen and (max-width: 740px) {
    .spacer .ten.one {
        height: 5em;
    }
}

@media only screen and (min-width: 100px) {
    .spacer {
        font-size: calc(9px + (20) * ((100vw - 300px) / (10000))); 
    }
         /* Hero -- Tech Industry */
    .spacer .one {
        height: 0; 
    }

     /* Bootcamps -- Section OpenHub */
    .spacer .four {
        height: 6em;
        height: 7.6em;
    }
     /* Section OpenHub -- Parallax #1 */
    .spacer .five {
        height: 0;
    }
     /* Parallax #1 -- Caption Gallery */
    .spacer .six {
        height: 8em;
        height: 8em;
        
        height: 5em;
    }
     /* Caption Gallery -- How Does It Work? */
    .spacer .seven.one {
        height: 8em;
        height: 4em;
        height: 4em;
    }
     /* -- How Does It Work? -- */
    .spacer .seven.two {
        background: #183a9b;
        height: 8em;
        height: 4em;
        height: 5em;
    }
    .spacer .eight.one {
        background: #183a9b;
        height: 8em;
        height: 5em;
        height: 6em;
    }
    
     /* -- Social Proof -- */
    .spacer .ten.two {
        background: #D4DFE9;
/*        eight: 4em;*/
        height: 5em;
    }
    .spacer .eleven.one {
        background-color: #D4DFE9;
/*        ackground-color: grey;*/
        height: 4em;
        height: 0;
        height: 10em;
        height: 6em;
    }
     /* -- CTA_4 -- */
    .spacer .eleven.two {
        background-color: #f57921;
        height: 4em;
        height: 0;
        height: 5em;
    }
    .spacer .twelve {
        background-color: #f57921;
        height: 5em;
        height: 0;
        height: 4em;
        height: 6.5em;
        
        height: 7.5em;
    }        
     /* -- Final CTA -- */
    .spacer .thirteen {
        background-color: #183a9b;
        height: 5em;
        height: 6em;
    }
    .spacer .fourteen {
        background-color: #183a9b;
        height: 4em;
        height: 6em;
        height: 2em;
        height: 6.5em;
        height: 7em;
    }
}


/* [ s.e.spacing ] -------- -------- -------- -------- -------- --------- --------- */

/* -------- -------- -------- -------- -------- -------- -------- -------- -------- */


    /*    T E X T  Details [s.Text]     */

    /*    T E X T  Details [s.Text]     */
.text {
    font-family: Arimo, sans-serif;
    ont-size: 18px;
    font-size: calc(16px + (19 - 16) * ((100vw - 300px) / (1600 - 300)));
    font-size: calc(16px + (20 - 16) * ((100vw - 300px) / (1600 - 300)));
    letter-spacing: 0.45px;
    
}
.black {
    color: rgb(0,0,0);
}
.white {
    color: rgb(250,250,250);
}
.serif {
    font-family: serif;
}

   /* ----------------------- */
/*    section Hero [ sT.hero ]    */
   /* ----------------------- */


        /* ----------------------- */
/*    section Tech Industry [ sT.techIndustry ]    */
        /* ----------------------- */



        /* ----------------------- */
  /*      Bootcamps [t.Bootcamps]      */
        /* ----------------------- */


    /* ----------------------- */
  /*     Parallax 1 [sT.Parallax1]       */
    /* ----------------------- */
#parallax_1 .image h3 {
    font-family: 'Source Sans Pro', "Arimo", sans-serif;
    font-weight: 600;
    line-height: ;
        letter-spacing: 1.3px;
    letter-spacing: 1.8px;
/*    ord-spacing: 2px;  */
    
    font-size: calc(40px + (75 - 40) * ((100vw - 300px) / (1600 - 300)));
}


    /* ----------------------- */
  /*     Caption Gallery  [sT.Caption]       */
    /* ----------------------- */
#caption_gallery h3 {
    font-weight: 600;
    font-size: calc(17px + (20 - 17) * ((100vw - 300px) / (1600 - 300)));
}


    /* ----------------------- */
  /*      How Does it Work?  [s.tHow]      */
    /* ----------------------- */
#how_work h2 {
    font-family: 'Source Sans Pro', Arimo, sans-serif;
    letter-spacing: 2px;
    font-size: calc(26px + (35 - 26) * ((100vw - 300px) / (1600 - 300)));
}   
#how_work .content p {
    font-family: Arimo, sans-serif;
    letter-spacing: 0.45px;
    line-height: 1.7;
    font-size: calc(18px + (22 - 18) * ((100vw - 300px) / (1600 - 300)));
}


    /* ----------------------- */
  /*      Collab-Driven  [s.tCollab]      */
    /* ----------------------- */
#collab_driven h2 {
    font-family: 'Source Sans Pro', Arimo, sans-serif;
    font-weight: 600;
    letter-spacing: 3.5px;
    word-spacing: ;
    font-size: calc(22px + (35 - 22) * ((100vw - 300px) / (1600 - 300)));
}


    /* ----------------------- */
  /*      Our Students  [s.tOur]      */
    /* ----------------------- */
#our_students .part.one {
    font-family: 'Source Sans Pro', "Arimo", sans-serif;
    font-weight: ;
    line-height: ;
    letter-spacing: ;
    word-spacing: px;
    
    font-size: calc(24px + (55 - 24) * ((100vw - 300px) / (1600 - 300)));
}
#our_students .part.two {
    font-size: calc(16px + (21 - 16) * ((100vw - 300px) / (1600 - 300)));
}
@media only screen and (max-width: 768px) {
    #our_students .part.two {
        word-spacing: -2px;
        letter-spacing: 1px;
    }


    
    
}

#full_reviews .full_review_slides p:nth-child(1) {
       
}

/* ----------------------- */
  /*      Social Proof  [s.tSocial]      */
/* ----------------------- */
#social_proof .mySlides p:nth-child(1) {
    font-family: 'Baloo 2', sans-serif;
    letter-spacing: 0.5px;
    word-spacing: px;
    idth: 50%;
}
#social_proof h2 {
    font-size: calc((22px + (30 - 22) * ((100vw - 300px) / (1600 - 300))));
    font-family: 'Baloo 2', sans-serif;
    font-weight: ;
    line-height: ;
    letter-spacing: 1.5px;
    word-spacing: px;
}
#social_proof .text {
    word-spacing: 1px;    
}

/* ---------------
-------- */
  /*      CTA_4  [s.tCTA4]      */
/* ----------------------- */
#cta_4 p {
    font-size: calc(22px + (35 - 22) * ((100vw - 300px) / (1600 - 300)));
}
#parallax_2 h2 {
    font-family: 'Source Sans Pro', "Arimo", sans-serif;
    font-weight: 600;
    line-height: ;
    letter-spacing: 1.8px;
    word-spacing: ;
    ord-spacing: 2px;
    
    font-size:calc(40px + (60 - 40) * ((100vw - 300px) / (1600 - 300)));
}

    /* ----------------------- */
  /*      Final_CTA  [s.tFinal]      */
    /* ----------------------- */
#final_cta h2 {
    font-family: sans-serif;
    font-weight: 600;
    line-height: ;
    letter-spacing: 0.6px;
    word-spacing: px;
    
    font-size: 21px;
    font-size: calc((22px + (30 - 22) * ((100vw - 300px) / (1600 - 300))));
}
#final_cta h3 {
    font-weight: 500;
}

/* -------- -------- -------- -------- -------- -------- -------- -------- -------- */


/* -------- -------- -------- -------- -------- -------- -------- -------- -------- */


/* -------- -------- -------- -------- -------- -------- -------- -------- -------- */



/*------ S E C T I O N  "Hero" [s.hero] ------*/
#hero .content {
    position: relative;
}

#hero .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0,0,0, 0.65), rgba(0,0,0, 0.25));
}

#hero .image {
    background-image: url("img/background_img/hero_img_640x_x1920w.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 66%;
    height: 80vh;
}

#hero #hero_sub {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    text-align: center; 
}
#hero #hero_sub button  {
    cursor: pointer;
    margin-top: calc(74px + (85 - 74) * ((100vw - 300px) / (1920 - 300)));
}

                        /*  [ fs.Hero ]  */
/*    Text Details [ td.hero ]    */
/*    Text Details [ t.Hero ]    */
#hero #hero_sub h1 {
    font-family: 'Source Sans Pro', Arimo, sans-serif;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 4px;
    word-spacing: 2px;
    font-size: calc(40px + (60 - 20) * ((100vw - 300px) / (1920 - 300)));
}







@media only screen and (max-width: 1199px) {
    #hero #hero_sub {
        width: 94%;
    }
    #hero .image {
        height: 70vh;
    }    
}
@media only screen and (max-width: 991px) {
    #hero #hero_sub h1 {
        word-spacing: 0;
    }
}
@media only screen and (max-width: 300px), only screen and (max-height: 700px) {
    #hero #hero_sub h1 {
        line-height: 1.3;
        line-height: 1.1;
        letter-spacing: 2px;
    }
    #hero #hero_sub button {
        margin-top: 40px;
    }
}

@media only screen and (max-height: 530px) {
    #hero #hero_sub h1 {
        font-size: 50px;
        ont-size: 55px;
        ine-height: 1.3;
        font-size: 40px;
    }
    #hero button {
/*   padding: calc(21px + (34 - 21) * ((100vw - 300px) / (1920 - 300))) calc(20px + (55 - 20) * ((100vw - 300px) / (1920 - 300)));*/
        adding: calc(18px + (34 - 18) * ((100vh - 300px) / (530 - 300))) calc(20px + (55 - 20) * ((100vw - 300px) / (1920 - 300)));
        padding-top: 0px;
        padding-bottom: 0px;
        argin-left: 16vh;
        margin-left: 30px;
        margin-left: 3%;
    }
    #hero #hero_sub {
        display: flex;
        flex-direction: row;        
    }
    #hero #hero_sub h1 {
        width: 50%;   
    }
    
}


  /*------ S E C T I O N  "Tech Industry" [ s.techIndustry / s.Industry] ------*/
#tech_industry {
    background-color: #99c8f0;
    padding: 3rem 0 1.8vw 0;
    transition: background-color 2s;
    
}
#tech_industry:hover {
    background-color: #c0e0fb;
}
#tech_industry .content {
    width: 95%;  
    margin: 0 auto;  
    display: flex;
    justify-content: center;
    align-items: center;
}

#tech_industry .left_col .title {
    background-color: #f57921;
    padding: 6.3vmax 0;
    margin: auto;
    width: 100%;
}

#tech_industry .left_col h2  {
    background-color: #f57921;
    width: 80%;
    margin: auto;
    text-align: center;
}
#tech_industry .right_col {
    width: 40vw;
    border: 1px solid #f57921;
    border-left: none;
}
#tech_industry .right_col .text {
    padding: 7%;
}
#tech_industry .right_col .text .solo_sentence {
    display: block;
}
#tech_industry .bot_row {
    width: 94%;
    margin: auto;
    margin-top: 5.1vw; 
    text-align: center;    
}
#tech_industry .bot_row .text > p {
    text-align: center;
    width: 86vw;
    margin: auto;
}
#tech_industry .text_sub {
    display: flex; /*  take out flex for media query   */
    justify-content: center;
}



#tech_industry .text_sub .sub {
    transition: border 1s, padding .45s;
    margin: 0 calc(8px + (18 - 8) * ((100vw - 300px) / (1920 - 300)));
}
#tech_industry .text_sub .sub {    
    argin: 0 calc(3px + (18 - 3) * ((100vw - 300px) / (1920 - 300)));
}
#tech_industry .text_sub .sub:hover {
    border: 2px solid #EFC5DB;
    padding: 2px 2rem;
    border-radius: 10%;
}


/*    Text Details [ td.techIndustry ]    */
/*    Text Details [ td.techIndustry ]    */
#tech_industry  .left_col h2 {
    text-transform: uppercase;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 600;
    line-height: 1.7;
    letter-spacing: 2.1px;
    letter-spacing: 1.8px;
    word-spacing: 3px;
    
    font-size: calc(22px + (30 - 22) * ((100vw - 300px) / (1920 - 300)));
}
#tech_industry .bot_row .text > p {
    font-size: calc(14px + (18 - 14) * ((100vw - 300px) / (1600 - 300)));
}

@media only screen and (max-width: 900px) {
    #tech_industry h2 {
        word-spacing: 0; 
    }
}



    /*                  Media Queries begin here!                   */
    /*                  Media Queries begin here!                   */
@media only screen and (max-width: 1500px) {
    #tech_industry {
        padding-bottom: 2vw;
    }
    tech_industry h2 {
        padding: 6vmax 5.5vmax;        
    }
}

@media only screen and (max-width: 1530px) { 
    #tech_industry {
        padding-bottom: 2.5vw;
    }
    #tech_industry .content {
        flex-direction: column;
    }
    #tech_industry .left_col .title {
        width: 70vw;
    }
    tech_industry h2 {    
        padding: 5.8vmax 7vmax;        
    }
    #tech_industry .right_col {
        width: calc(300px + (1000 - 300) * ((100vw - 300px) / (1920 - 300)));
        border: 1px solid #f57921;
        order-top: 4px solid black;
        margin-top: -1.2px;
    }
    #tech_industry .right_col .text {
        padding: 4% 8% 4.4% 6.5vw;
    }
    #tech_industry .bot_row {
        margin-top: 3.4vw;
    }
}

@media only screen and (max-width: 1000px) {
    #tech_industry .left_col .title {
        width: 80vw;
    }
}

@media only screen and (max-width: 650px) {
    #tech_industry {
        padding-bottom: 2.8vw;
    }
    #tech_industry .left_col .title {
        width: 90%;
    }
    tech_industry .right_col .text {
        margin: 4% auto;
        margin-bottom: 4.5%;
        padding: 0;
        padding-left: 4%;
        padding-bottom: 0.5%;
        width: 90%;
    }
    #tech_industry .right_col .text {
        order: 2px solid #121212;

/*        width: 90%;*/
    }    
    
}

@media only screen and (max-width: 650px) {
    #tech_industry .text_sub .sub.da {
        padding: 0 4px;
    }
    
}

@media only screen and (max-width: 450px) {
    #tech_industry .text_sub .dot {
          margin: auto;
    }
    
    tech_industry .right_col .text .solo_sentence {
        display: block;
    }
        
    #tech_industry .right_column .text.black p {
        text-align: center;
/*        display: inline-block;*/
    }
    
    #tech_industry .bot_row .text > p {
        line-height: 1.2;
        
    }
    
    #tech_industry .text_sub {
        margin: auto;
/*        margin: 0;*/
        margin-top: 8px;
        margin-top: 9px;
        width: 80%;
        line-height: 1.2;
        line-height: 1.05;
/*
        ustify-content: space-around;
        ustify-content: space-between;
        ont-weight: 500;
*/        
    }
    
    #tech_industry .bot_row .text > p {
        font-size: calc(13.5px + (17 - 13.5) * ((100vw - 300px) / (1600 - 300)));
        
    }

    #tech_industry .text_sub .sub.wd {
        font-size: calc(13.1px + (17 - 13.1) * ((100vw - 300px) / (650 - 300)));
/*
        argin-right: -4px;
        argin-left: -1px;
*/
        
        padding: 0 2px;
/*        adding-left: 2px;*/
    }
    #tech_industry .text_sub .sub.da {
        font-size: calc(13.5px + (17 - 13.5) * ((100vw - 300px) / (650 - 300)));
/*
        argin-right: -4px;
        argin-left: -4px;
        
        adding: 0 6px;
        adding: 0 5px;
*/
    }
    #tech_industry .text_sub .sub.it {
        font-size: calc(13.5px + (17 - 13.5) * ((100vw - 300px) / (650 - 300)));
        padding: 0 6px;
        
/*        adding-left: 7px;*/
    }
}
    

@media only screen and (max-width: 370px) {
    #tech_industry .right_column .text.black p,
    #tech_industry .right_column .text.black .solo_sentence {
        display: inline;
    }
    #tech_industry .right_col .text {
        padding: 4% 5% 4.5% 6%;
        
    }
    #tech_industry .text_sub .sub.wd {
        padding: 0 0.5px;
    }
    #tech_industry .text_sub .sub.da {
        padding: 0 3px;
    }
    #tech_industry .text_sub .sub.it { 
        padding: 0 2px;
        padding-left: 3px;
    }
}

@media only screen and (max-width: 300px) {
    #tech_industry .text_sub {
        idth: 95%;
        margin-top: 4.5px;
        isplay: inline-block;
        flex-direction: column;
        width: 100vw;
        max-width: 100%;
    }
    #tech_industry .text_sub .sub {
        line-height: 1;   
    }
    #tech_industry .text_sub .sub.wd {
        adding: 0 -3px;
        align-self: flex-start;
        align-self: center;
        idth: 100px;
        order: 2px solid #121212;
        padding: 1px 0;
        padding-top: 2px;
    }
    #tech_industry .text_sub .sub.da {
        adding: 0 -1px;
        align-self: center;
        order: 2px solid #121212;
        idth: 70px;
        padding: 1px 0;
    }
    #tech_industry .text_sub .sub.it {
        adding: 0 -15px;
        align-self: flex-end;
        align-self: center;
        order: 2px solid #121212;
        idth: 60px;
        padding: 1px 0;
        padding-bottom: 3px;
    }
    
}
@media only screen and (max-width: 400px) {
    #tech_industry .right_col {
        width: calc(300px + (1000 - 300) * ((100vw - 300px) / (1920 - 300)));
        width: 102%;
    }
}

    
    

  /*------ S E C T I O N  "Tech Skills" [ s.techSkills / s.Skills] ------*/
#tech_skills .transition {
    width: 70%;
    margin: 0 auto;
    padding: 5vw 1vh;
    background: #070F17;
    transition: width 1s;
}    
#tech_skills .transition:hover {
/*    width: 90%;*/
/*    max-width: 100%;*/
    width: 98.1vw;
}
#tech_skills .content {
    border: 3px solid #ABCBE7;
    transition: border 1.5s;
    width: 48.5vw;
    margin: 0 auto;
    padding: 4vw 3.3vh;
    background: #070F17;
}
#tech_skills .transition:hover .content {
    border: 3px solid #DDEAF6;
}
#tech_skills .text {
    display: flex;
    justify-content: center;
}
#tech_skills .left_col {
    padding: 10px 1px 10px 25px;
    width: 25vw;
}
#tech_skills .right_col {
    padding: 10px 15px 10px 1px;
    width: 24vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    
}
#tech_skills .gutter_col {
    width: 1.5vw;
}

/*------ text(p) individual 'line-height' spacing ------*/
#tech_skills .left_col p:nth-child(2) {
    margin-top: 1vw;
}
#tech_skills .left_col p:nth-child(3) {
    text-align: center;
    font-weight: 600;
    margin-top: 2.6vw;
    letter-spacing: 1.4px;
}
#tech_skills .right_col p:nth-child(2) {
    margin-top: 1vw;
}
#tech_skills .right_col p:nth-child(3) {
    margin-top: 2vw;
    font-weight: 600;
    letter-spacing: 1.3px;
}



    /*                  Media Queries begin here!                   */
    /*                  Media Queries begin here!                   */
@media only screen and (max-width: 1200px) {
    #tech_skills .left_col {
        width: 50%;
    }
    #tech_skills .right_col {
        width: 50%;
    }
}


@media only screen and (max-width: 1000px) {
    #tech_skills .transition {
        width: 62vw;
        padding: 4.5vw 0.7vh;
        box-sizing: border-box;
    }
    #tech_skills .transition:hover {
        width: 100%;
    }
    #tech_skills .transition:hover .content {
        width: 70%;
    }
    #tech_skills .content {
        padding: 3vw 0;
        width: 50.5vw;
    }
    #tech_skills .text {
        flex-direction: column;
        align-items: center;
    }
    #tech_skills .left_col {
        padding-left: 0.2vw;
        min-width: 42vw;
        margin-left: 5px;
    }
    #tech_skills .right_col {
        padding-left: 0.2vw;
        min-width: 42vw;
        margin-left: 5px;
    }
    #tech_skills p {
        width: fit-content;
        margin: auto;
    }
    #tech_skills .right_col p:nth-child(3) {
        text-align: center;
    }
}

@media only screen and (max-width: 760px) {
    #tech_skills .transition {
        padding: 3.2vw 1vh;
    }
    #tech_skills .content {
        border: none;
        padding: 2vw 3.3vh;
    }
/*
    #tech_skills .transition:hover .content {
        border: 2px solid #DDEAF6;
        width: 58%;
    }
*/
    #tech_skills .left_col {
        padding-left: 1.5vw;
        padding-bottom: 0;
    }
    #tech_skills .right_col {
        padding-left: 1.5vw;
        padding-top: 0;
    }
    #tech_skills .left_col p:nth-child(3) {
        margin-top: 2.5vw;
        margin-bottom: 2.5vw;
    }
    #tech_skills .right_col p:nth-child(2) {
        margin-top: 0.6vw;
    }
    #tech_skills .right_col p:nth-child(3) {
        margin: 2vw auto;
        margin-bottom: inherit;
    }
}
@media only screen and (max-width: 760px) {
    #tech_skills .transition {
        width: 100%;
    }    
    #tech_skills .left_col {
        width: 50vw;
    }
    #tech_skills .right_col {
        width: 50vw;
    }
    #tech_skills .transition:hover .content {
        border: none;
/*        width: 58%;*/
    }
    
}

@media only screen and (max-width: 670px) {
    tech_skills .transition {
        width: 65vw;
        min-width: 75vw;
        padding: 3.5vw 1vh;
    }
    
    #tech_skills .content {
        padding: 1.3vw 0;
    }
    #tech_skills .left_col {
        min-width: 55vw;
        padding-left: 0.7vw;
    }
    #tech_skills .right_col {
        margin-bottom: 0.4vw;
        min-width: 55vw;
        padding-left: 0.7vw;
    }
    #tech_skills .left_col p:nth-child(3) {
        letter-spacing: 1.1px;
    }
    #tech_skills .right_col p:nth-child(3) {
        letter-spacing: 1px;
    }
}    
        
@media only screen and (max-width: 575px) {
    #tech_skills .transition {
        min-width: 80vw;
        padding: 4vw 1vh;
    }
    #tech_skills .left_col {    
        min-width: 60vw;
/*        argin-left: 15px;*/
    }
    #tech_skills .right_col {    
        min-width: 60vw;
        margin-left: 15px;
    }
    #tech_skills .right_col p:nth-child(3) {
        margin-top: 2vw;
    }
    #tech_skills .transition:hover .content {
        idth: 96vw;
        width: 80%;
    }
}    
        
        
        

  /*------ S E C T I O N  "Bootcamps" [s.bootcamps] ------*/

  /*      Bootcamps [t.Bootcamps]      */
#bootcamps > .title > h2 {
    font-family: 'Baloo 2', sans-serif;
    letter-spacing: 1px;
    font-size: calc(24px + (60 - 24) * ((100vw - 300px) / (1600 - 300)));   
    font-weight: 600;
    ont-weight: bold;
}
#bootcamps > .title > p {
    ont-family: 'Source Sans Pro', Arimo, sans-serif;
    font-family: 'Source Sans Pro', sans-serif;
    ont-family: Arimo, sans-serif;
    font-size: calc(17px + (22 - 17) * ((100vw - 300px) / (1600 - 300)));
    font-style: italic;
}
#bootcamps .page-content .title {
    font-family: Arimo, 'Source Sans Pro', sans-serif;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: calc(20px + (32 - 20) * ((100vw - 300px) / (1600 - 300)));
    line-height: 1.2;
    letter-spacing: 1.8px;
    font-weight: 800;
}
@media (hover: hover) and (min-width: 800px) {
    #bootcamps .page-content .title {
        line-height: 1.3;
    }
}

#bootcamps .copy {
  ont-family: var(--font-serif);
    font-family: Rubik, Cardo;
    ont-family: Cardo;
  font-size: 2.2vmin;
    font-size: calc(16px + (19 - 16) * ((100vw - 300px) / (1600 - 300)));
    font-size: calc(18px + (21 - 18) * ((100vw - 300px) / (1600 - 300)));
    
  font-style: italic;
  line-height: 1.4;
    letter-spacing: 0.3px;
}



#bootcamps > .border_bar {
    border-top: 1px solid black;
    width: 77vw;
    margin: 0 auto;
    padding-top: 2rem; /* spacing between title and section's top border */
}
#bootcamps > .title {
    margin-bottom: 1.5rem;
    text-align: center;
    
    line-height: 1.1;

    width: fit-content;
    -moz-width: fit-content;
    idth: 80%;
    margin: auto;
    margin-bottom: calc(16px + (44 - 16) * ((100vw - 300px) / (1920 - 300)));
    margin-bottom: calc(26px + (44 - 26) * ((100vw - 300px) / (1920 - 300)));
}
#bootcamps > .title > p {
    adding-left: 15%;
    argin-top: -5px;
    text-align: end;
    
    margin: auto;
/*    margin-right: 0;*/
    
    idth: 80%;

}
#bootcamps .bootcamps_sub {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    margin-top: 4.3rem; /* distance between top of btn & above */
} 
#bootcamps .bootcamps_sub .border_bar {
    border-top: 2px solid black;
    width: 50%;
    margin-top: calc(45px + (80 - 45) * ((100vw - 300px) / (1920 - 300)));
}

        

/*------ codePen Part, credit: Ryan Mulligan -------*/
     /* https://codepen.io/hexagoncircle */
@import url('https://fonts.googleapis.com/css?family=Cardo:400i|Rubik:400,700&display=swap');
:root {
  --d: 700ms;
  --e: cubic-bezier(0.19, 1, 0.22, 1);
  --font-sans: 'Rubik', sans-serif;
  --font-serif: 'Cardo', serif;
}
#bootcamps .page-content .btn {
    font-family: 'Baloo 2', sans-serif;
}
#bootcamps .page-content * {
    box-sizing: border-box;
}
#bootcamps * {
    display: grid;
}

/* -------- -------- -------- -------- -------- -------- -------- -------- -------- */

#bootcamps .page-content {
  display: grid;
  grid-gap: 1vh;
  padding: 1rem;
padding-top: 0;
  max-width: 90%; 
  margin: 0 auto;
  ont-family: var(--font-sans);
}
@media (min-width: 800px) {
    #bootcamps .page-content {
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 0.9vw;
        max-width: 85vw;
        max-width: 89vw;
        width: calc(712px + (1632 - 712) * ((100vw - 300px) / (1920 - 800)));;
  }
}  
 
#bootcamps .card {
    position: relative;
    display: flex;
    align-items: flex-end;
/*    [s.overflow]*/
    overflow: hidden;
    adding: 1rem;  /* deleted this */
    width: 100%;
    text-align: center;
    color: whitesmoke;
    background-color: whitesmoke;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.1), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.1);

}
media (min-width: 600px) {
	 .card {
		 height: 350px;
	}
}
@media only screen and (min-width: 800px) {
    #bootcamps .card {
        height: 550px;
    }
}

   /*  Background-Images  */
#bootcamps .card:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 110%;
  background-size: cover;
  background-position: 0 0;
  transition: transform calc(var(--d) * 1.5) var(--e);
  pointer-events: none;
    index: 15;
}
/*  background  I M A G E S  here  */
#bootcamps .card:nth-child(1):before {
  background-image: url(img/bootcamp_web_dev.png);
  background-image: url(img/background_img/bootcamp_web_dev--72dpi.jpg);
}
#bootcamps .card:nth-child(2):before {
  background-image: url(img/background_img/bootcamp_data_analytics--72dpi.jpg);
}
#bootcamps .card:nth-child(3):before {
  background-image: url(img/background_img/bootcamp_it_support--72dpi.jpg);
}

/* -------- -------- -------- -------- -------- -------- -------- -------- -------- */

   /*   pre-Hovering: O V E R L A Y  (@max-width: 799px)  */
#bootcamps .card:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /*
    background: yellow;
    height: 70.9%;
    height: 114.5%;
    */
  height: 200%;
  pointer-events: none;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.009) 11.7%, rgba(0, 0, 0, 0.034) 22.1%, rgba(0, 0, 0, 0.072) 31.2%, rgba(0, 0, 0, 0.123) 39.4%, rgba(0, 0, 0, 0.182) 46.6%, rgba(0, 0, 0, 0.249) 53.1%, rgba(0, 0, 0, 0.32) 58.9%, rgba(0, 0, 0, 0.394) 64.3%, rgba(0, 0, 0, 0.468) 69.3%, rgba(0, 0, 0, 0.54) 74.1%, rgba(0, 0, 0, 0.607) 78.8%, rgba(0, 0, 0, 0.668) 83.6%, rgba(0, 0, 0, 0.721) 88.7%, rgba(0, 0, 0, 0.762) 94.1%, rgba(0, 0, 0, 0.79) 100%);
  background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
  transform: translateY(-50%);
  transition: transform calc(var(--d) * 2) var(--e);
 
}
       
/* -------- -------- -------- -------- -------- -------- -------- -------- -------- */

/*  general content layout  */
#bootcamps .page-content .content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  transition: transform var(--d) var(--e);  
    
/*    padding-top  doesn't work  */
/*    padding-right doesn't work on .title  */    
  padding: 1rem;    /* can change */
  adding: 2.4rem;    /* can change */
    adding-bottom: 2.4rem;

  
  z-index: 15;
    
}

/*  @min-width: 300px { hover: MARGIN of .title }    */
#bootcamps .page-content .title {
    padding: 8px 40px;
    adding-bottom: 4rem;
    
    /*  affects height of everything on hover & default  */
    argin-top: 1rem;
    margin-top: -5rem;
    margin-top: 0;
    margin-top: 2rem;
    
    
    margin-top: 1rem;
    margin-top: 0.6rem;
    
    padding-bottom: 0rem;
    margin-bottom: 0;
    argin: 0;
    
    ackground: rgb(0, 0, 0, 0.55);
    order-radius: 4px;
}
/*  @max-width: 999px, @min-width: 300px { hover: MARGIN of .copy }   */
#bootcamps .page-content .content > * + * {
  margin-top: 1rem;
  argin-top: -5rem;
    
    margin-top: 1rem;
    margin-top: 0.6rem;
    argin-top: 6rem;
    
    ilter: brightness(20%);
    
}
/*  @max-width: 999px, @min-width: 300px { hover: MARGIN of .btn }    */
#bootcamps .page-content .btn {
    eight: inherit;
    
    padding: 0.75rem 1.5rem;
    padding: 1rem 1.75rem;
    
    margin-top: 1.5rem; /* 1.5rem */
    margin-top: 3.5rem; /* 1.5rem */
    argin-top: 2.2rem; 
    margin-top: 1.5rem;
    margin-top: 2rem;
    argin-bottom: 0.25rem;    
    margin-bottom: 1.8rem;
    margin-bottom: 1.6rem;
}
bootcamps .page-content .btn {
    
    transition: box-shadow 2s;
}

/*#bootcamps .btn:hover {*/
bootcamps .page-content .content:hover .btn {
    box-shadow: 0 0  5px #183a98,
                0 0  25px #183a98,
                0 0  50px #f57921,
                0 0  100px #f57921;
    transition: box-shadow 1.8s;
    transition: box-shadow 3s;
    ox-shadow: 0 0 30px 5px #f57921,
                0 0  25px #183a98,
                0 0  50px #f57921,
                0 0 100px #f57921;
    
    ox-shadow: 0 0 20px 5px #183a98,
                0 0  35px #183a98,
                0 0  60px #f57921,
                0 0  100px #f57921;    
}



#bootcamps .card:hover:before .content {
    ilter: brightness(20%);
    background: rgba(0,0,0,1);
    transition: filter 2s;
    transition: background 2s;
}

bootcamps .content {
    filter: blur(40px);
}
bootcamps .card:after {
    filter: blur(40px);
}
bootcamps .card:after:hover {
    filter: brightness(10%);
    transition: filter 2s;
}
/*

#bootcamps .content:hover *:not(.title),
#bootcamps .content:hover *:not(.copy),
#bootcamps .content:hover *:not(.btn) {
    color: white;
    filter: brightness(20%);
    transition: filter 2s;
}
*/


bootcamps .content:hover *:not(.title, .copy, button) {
    color: white;
    filter: brightness(20%);
    transition: filter 2s;
}
/*

 *:not(.title, .copy, button) {
    color: white;
    filter: brightness(20%);
    transition: filter 2s;
}
*/
bootcamps .content:hover {
    color: white;
    filter: brightness(20%);
    transition: filter 2s;
}


/*#bootcamps .card:hover:before .content*/
#bootcamps .card:hover:before {
    filter: brightness(20%);
    transition: filter 2s;
}

#bootcamps .page-content .card:hover .btn {
    box-shadow: 0 0  5px #183a98,
                0 0  25px #183a98,
                0 0  50px #f57921,
                0 0  100px #f57921;
    transition: box-shadow 5s;
}


@media only screen and (max-width: 799px) {
    #bootcamps .page-content .card .btn {
        box-shadow: 0 0  5px #183a98,
                    0 0  25px #183a98,
                    0 0  50px #f57921,
                    0 0  100px #f57921;
    }
}






/*
#bootcamps .page-content .card:before {
    filter: brightness(30%);
}
*/
bootcamps .page-content .card:before {
    ransition: brightness 2s;
    transition: filter 2s;
    filter: brightness(100%);
    
}

bootcamps .card:focus-within:hover .content {
    filter: brightness(40%);
}

bootcamps .page-content .card:hover:before > .content:before {
    filter: brightness(40%);
/*    transition: brightness 1s;*/
}

bootcamps .page-content .content:hover:before > .title.wd:hover:after {
    filter: brightness(40%);
/*    transition: brightness 1s;*/
}

bootcamps .page-content .card:hover:after {
    color: lime;
    
}


bootcamps .page-content .card:hover:before > .content,
bootcamps .page-content .card:hover:focus-within > .content {
    filter: brightness(10%);
    transition: filter 2s;
}

bootcamps .page-content .card:hover:before .content {
    ilter: brightness(30%);
    ilter: brightness(10%);
    ransition: filter(brightness) 3s;
}
bootcamps .page-content .card:before:hover .content {
    filter: brightness(10%);
    ransition: filter(brightness) 3s;
    transition: filter 3s;
}

bootcamps .page-content .card:before:hover {
    filter: brightness(10%);
}

bootcamps .page-content .card {
    order: 2px solid white;

}

/*
    border-radius: 5px;

    box-shadow: 0 0 5px #183a98
                0 0 25px #183a98;
     box-shadow: 0 0 5px #03e9f4,
              0 0 25px #03e9f4,
              0 0 50px #03e9f4,
              0 0 100px #03e9f4;

*/


bootcamps .btn a {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  color: #03e9f4;
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  transition: .5s;
  margin-top: 40px;
  letter-spacing: 4px
}

bootcamps .btn a:hover {
  background: #03e9f4;
  color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 5px #03e9f4,
              0 0 25px #03e9f4,
              0 0 50px #03e9f4,
              0 0 100px #03e9f4;
}




media only screen and (min-width: 800px) {
    margin-top: 3.5rem;
    font-size: 1.6vmin;
}



@media (hover: hover) and (min-width: 800px) {
    #bootcamps .card:after {
        transform: translateY(0);
    }    
    #bootcamps .card:focus-within:before, 
        #bootcamps .card:focus-within:after, 
        #bootcamps .card:focus-within .content, 
        #bootcamps .card:focus-within .content > *:not(.title) {
            transition-duration: 0s;
        }    
/*  hover: height-position of the entire ".card"   */
/*    BUT, don't change    */
    #bootcamps .card:hover, #bootcamps .card:focus-within {
        align-items: center;
    }
    
/*  pre-hover: height-position of background-image  */    
    #bootcamps .card:hover:before, 
    #bootcamps .card:focus-within:before {
        transform: translateY(-4%);
    }        
    /* -------- -------- -------- -------- -------- */    

    /* -------- -------- -------- -------- -------- */    
    
    
/*  hover: height-position of the background-shading ONLY */
    #bootcamps .card:hover:after, 
    #bootcamps .card:focus-within:after {
        transform: translateY(-50%);
        transform: translateY(-40%);
    }
    
    /* -------- -------- -------- -------- -------- */    
    
/*  pre-Hover: height-position of ".card" / ".title"   */    
    #bootcamps .page-content .content {
        width: 100%;
        background: rgba(0, 0, 0, 0.60);
/*        transform: translateY(calc(100% - 7rem));*/
        transform: translateY(calc(100% - 7.6rem));    
        transform: translateY(calc(100% - 10rem));
/*        margin-top doesn't work    */
        argin-bottom: 4rem;
        
        ransform: translateY(calc(100% - 11rem));
        
        
/*
        padding-top: 1.6rem;
        padding-bottom: 1.4rem;
        
        padding-top: 22px;
        
        padding-top: calc( 22px + (24 - 22) * ( (100vw - 300px) / (1920-300) )    );
        
        padding-top: calc( 25px + (4 - 25) * ( (100vw - 300px) / (1920-300) )    );
        
*/
        
        padding-top: calc( 34px + (4 - 34) * ( (100vw - 300px) / (1920-300) )    );
    }
    
    
    
    
    bootcamps .card.wd .content {
        padding-top: calc( 25px + (4 - 25) * ( (100vw - 300px) / (1920-300) )    );    
    }
    bootcamps .card.da .content {
        padding-top: calc( 25px + (4 - 25) * ( (100vw - 300px) / (1920-300) )    );
        adding-top: 22px; 
    }    
    bootcamps .card.is .content {
        padding-top: calc( 25px + (4 - 25) * ( (100vw - 300px) / (1920-300) )    );
    }
    
    
    /* affects both pre-Hover & Hover  */
    #bootcamps .page-content .title {
        argin: auto;
        argin-top: 1rem;
        argin-top: 0.8rem;
        
        argin-bottom: 3rem;
        adding-top: 1rem;
        argin-top: 1rem;
        
        
        order: 2px solid white;
        ax-width: 400px;
    }
    #bootcamps .page-content .title.is {
        argin-top: 0;
        adding-top: 2.5rem;
        adding-top: 1.7rem;
    }     
    
    #bootcamps .page-content .title {
           adding-top: 0;
        argin-top: 0;
    }
    
    
    
    #bootcamps .card.wd .title {
        max-width: 400px;
    }
    #bootcamps .card.da .title {
        max-width: 320px;
    }
    #bootcamps .card.is .title {
        max-width: 230px;
    }
    
    
/*   pre-Hover doesn't matter   */
/*  (pre-Hover &) Hover: height-position (incl. MARGIN & padding) & visibility of ".copy"   */
    /*  [don't use padding] padding affects button   */
    #bootcamps .page-content .content > *:not(.title) {
        opacity: 0;
        transform: translateY(1rem); /* only affects "pre-Hover"  */
        transition: transform var(--d) var(--e), opacity var(--d) var(--e);
        argin-bottom: 2rem;
        argin-top: 0;
        argin-top: 10px;
    }
    
/*  hover: height-position of ".copy"   */
 #bootcamps .card:hover .content > *:not(.title),
    #bootcamps .card:focus-within .content > *:not(.title) {
    opacity: 1;
/*  doesn't move '.btn' & '.title' too much   */
    transform: translateY(0); 
    transition-delay: calc(var(--d) / 8);
        
        ransform: translateY(-10%); 
  }

    
/*  Hover: height-position of the entire ".content"  */    
    #bootcamps .card:hover .content, 
    #bootcamps .card:focus-within .content {
        padding-bottom: 15rem;
        padding-top: 3.5rem;
        transform: translateY(0);
        ransform: translateY(30%);
        padding-bottom: 22rem;
        padding-bottom: 0;
        padding-top: 1.4rem;
        
        margin: auto;
        margin-bottom: 15%;
        argin-bottom: 5rem;
        
        
        padding-top: 1rem;
        padding-top: 0.7rem;
        padding-top: 0rem;
        
                
        margin-bottom: 35%;
        margin-bottom: calc( 70px + (115 - 70) * ( (100vw - 300px) / (1920-800)    )  );
        
        margin: auto;
        
        argin-bottom: 115px;
    }
    
    #bootcamps .page-content .btn {
        margin-bottom: 2rem;
        argin-bottom: 0.25rem;    
        margin-bottom: 1.8rem;
        margin-bottom: 1.6rem;
        
        /* ------- */
        margin-bottom: calc( 64px + (64-30) * ( (100vw / 300px) / (1920-800) )  );
        
        margin-bottom: 4rem;
        margin-bottom: calc( 34px + (40-34) * ( (100vw - 300px) / (1920-800) )  );
        
        margin-top: 1.5rem; /* 1.5rem */
        margin-top: 3.5rem; /* 1.5rem */
        argin-top: 2.2rem; 
        margin-top: 1.5rem;
        
        margin-top: 2rem;
        
        margin-top: calc( 26px + (44-26) * ( (100vw - 300px) / (1920-800) )  );
        
        margin-bottom: calc( 34px + (36-34) * ( (100vw - 300px) / (1920-800) )  );
        margin-bottom: 48px;
        
        margin-bottom: 42px;
        
    }
    
    
}

@media (hover: hover) and (min-width: 1020px) {
    #bootcamps .card.is .title {
        max-width: none;
    }
    #bootcamps .card.is .content {
        padding-top: calc( 55px + (33 - 55) * ( (100vw - 300px) / (1920-1020) )    );
        adding-top: 35px;         
    }
    #bootcamps .card.is:hover .content {
        padding-top: calc( 55px + (0 - 55) * ( (100vw - 300px) / (1920-1600) )    );
    }
}
@media (hover: hover) and (min-width: 1310px) {
    #bootcamps .card.da .title {
        max-width: none;
    }
    #bootcamps .card.da .content {
        padding-top: calc( 55px + (33 - 55) * ( (100vw - 300px) / (1920-1310) )    );
    }
    #bootcamps .card.da:hover .content {
        padding-top: calc( 55px + (0 - 55) * ( (100vw - 300px) / (1920-1600) )    );
    }
}
@media (hover: hover) and (min-width: 1600px) {
    #bootcamps .card.wd .title {
        max-width: none;
    }
    #bootcamps .card.wd .content {
        padding-top: calc( 55px + (33 - 55) * ( (100vw - 300px) / (1920-1600) )    );
        
        adding-top: 35px;
    }
    #bootcamps .card.wd:hover .content {
        padding-top: calc( 55px + (0 - 55) * ( (100vw - 300px) / (1920-1600) )    );
    }
}

    
    








media (hover: hover) and (min-width: 1000px) {
    #bootcamps .page-content .content {
        padding-top: 20px;
        
    }
    
}



media (hover: hover) and (min-width: 1000px) {
    #bootcamps .page-content .content {
        
    }
    #bootcamps .page-content .content {
        transform: translateY(calc(100% - 7.6rem));
        transform: translateY(calc(100% - 10rem));
        argin: auto;
        
        order: 2px solid #121212;
        
       
        padding-top: 1.7rem;
        
        adding: 1rem;
        
    }
    
    
    #bootcamps .card:hover .content, 
    #bootcamps .card:focus-within .content {
        transform: translateY(30%);
        transform: translateY(25%);
        
        padding-bottom: 15rem;
        padding-top: 3.5rem;
    }
    bootcamps .page-content .title {
        padding-top: 2vw;
        padding-top: 7%;
        padding-top: 5%;
    }
    #bootcamps .page-content .title.wd {
        padding-top: 2.5%;
    }
    #bootcamps .page-content .title.da {
        padding-top: 2.5%;
    }
    #bootcamps .page-content .title.is {
        padding-top: 5%;
    }
    
     #bootcamps .card:hover .content, 
    #bootcamps .card:focus-within .content {
        
    }
    #bootcamps .page-content .copy,{}
    #bootcamps .page-content {}
    
    /*
    #bootcamps .card:hover .content, 
    #bootcamps .card:focus-within .content 
    
    .card:hover .content > *:not(.title)  .card:after
    */
    #bootcamps .card:hover .content > *:not(.card) {
        transform: translateY(-25%);
    }
    
    
}

media (hover: hover) and (min-width: 1420px) {
    #bootcamps .page-content .title.wd {
        padding-top: 5%;
    }
}





  /*------ S E C T I O N  "Section OpenHub" [s.openhub] ------*/
#section_openhub .content {
    text-align: center;
    background: #183a98;
    padding-top: 5%;
    padding-bottom: 5%;
}
#section_openhub .text {
    margin: auto;
    width: 80%;
    max-width: 850px;
}
#section_openhub p {
    padding-bottom: 0.2%;
}
#section_openhub h3 {
    font-weight: 500;
}


    /*                  Media Queries begin here!                   */
    /*                  Media Queries begin here!                   */
@media only screen and (max-width: 1000px) {
    #section_openhub .text {
        margin: 2.5rem auto;
    }
}

@media only screen and (max-width: 600px) {
    #section_openhub .content {
        padding-top: 3%;
        padding-bottom: 3%;
    }
    #section_openhub .text {
        idth: 84%;
        margin: 3.5rem auto;
        line-height: 1.6;
    }
    #section_openhub .text h3 {
        margin-top: 0.4vw;
    }
    #section_openhub p {
        padding-bottom: 0;
    }
}



  /*------ S E C T I O N  "Parallax #1: 'Release the Tech Leader Inside You'" [ s.Parallax1 / s.1parallax ] ------*/
  /*     Parallax 1 [t.Parallax1]       */
#parallax_1 .image h3 {
    font-family: 'Source Sans Pro', Arimo, sans-serif;
    font-weight: 600;
    letter-spacing: 1.8px;
    /*    line-height: ;*/
    /*    word-spacing: 2px;  */
    font-size: calc(40px + (75 - 40) * ((100vw - 300px) / (1600 - 300)));
}

#parallax_1 .image {
    background-image: linear-gradient(rgba(0,0,0,.9), rgba(0,0,0,0.4)), url(img/background_img/tech_leader_1--1048maxW.jpg);
    min-height: 73vh;
    min-width: 100%;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
#parallax_1 .parallax1_sub {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding-bottom: 1.5rem;
    padding-top: 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
    width: 87%;
    text-align: center;
/*    border: 3px solid #f1f1f1;*/
}
#parallax_1 h3 {
    padding-bottom: 2rem;
    padding-top: 1.5rem;
}



    /*                  Media Queries begin here!                   */
    /*                  Media Queries begin here!                   */
@media only screen and (max-width: 1260px) {
    #parallax_1 .image h3 {
        width: 80%;
        margin: auto;
    }
}
@media only screen and (max-width: 1200px) {
    #parallax_1 .image {
        min-height: 65vh;
    }
    #parallax_1 .parallax1_sub {
        padding-left: 0;
        padding-right: 0;
    }
}
@media only screen and (max-width: 1010px) {
    #parallax_1 .parallax1_sub {
        width: 90%;
    }
}
@media only screen and (max-width: 950px) {
    #parallax_1 .image h3 {
        width: 98%;
        padding: 0;
    }
    #parallax_1 .parallax1_sub {
        width: 80%;        
    }
}
@media only screen and (max-width: 800px) {
    #parallax_1 .image {
        min-height: 60vh;
    }
}
@media only screen and (max-width: 600px) {
    #parallax_1 .image {
        min-height: 50vh;
    }
}




  /*------ S E C T I O N  "Caption Gallery" [s.caption / s.section ] ------*/
#caption_gallery .content {
    width: 77.5vw;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}
#caption_gallery .row {
    display: flex;
}
#caption_gallery .r1 {
    display: flex;
    justify-content: flex-end;
}
#caption_gallery .r1,
#caption_gallery .r3 {
    flex-direction: row-reverse;
}
#caption_gallery .r1,
#caption_gallery .r3 {
    text-align: right;  
    border-left: 1px solid black;
}
#caption_gallery .r2 {
    margin-top: 3vw;
    text-align: left;
    border-right: 1px solid black;
}
#caption_gallery .r3 {
    margin-top: 3vw;
} 
#caption_gallery h3 {
    padding-top: 2.5vw;
}

#caption_gallery .image {
    min-width: 40vw;
}
#caption_gallery img {
    width: 100%;
    max-width: 660px;
}

#caption_gallery .r1 .image,
#caption_gallery .r3 .image {
    margin-left: 4vw;
    text-align: left;
}
#caption_gallery .r2 .image {
    margin-right: 4vw;
    text-align: right;
}

#caption_gallery .r1 p,
#caption_gallery .r3 p {
    margin-left: 6vw;
}
#caption_gallery .r2 p {
    margin-right: 6vw;
}

#caption_gallery .c1,
#caption_gallery .c3 {
    margin-left: 2vw;
}
#caption_gallery .c2 {
    margin-right: 2vw;
}


    /*                  Media Queries begin here!                   */
    /*                  Media Queries begin here!                   */
@media only screen and (max-width: 820px) {
    #caption_gallery .r1 p,
    #caption_gallery .r3 p {
        margin-left: 0;
    }
    #caption_gallery .r2 p {
        margin-left: 0;
    }
    #caption_gallery h3 {
        padding-top: 0.6vw;
    }
    #caption_gallery .r1,
    #caption_gallery .r3 {
        border-left: none;
    }
    #caption_gallery .r2 {
        border-right: none;
    }
}

@media only screen and (max-width: 700px) {
    #caption_gallery .content {
        width: 84vw;
    }
    #caption_gallery .r1,
    #caption_gallery .r2,
    #caption_gallery .r3 {
        flex-direction: column;
        align-items: center;
    }
    #caption_gallery .r2,
    #caption_gallery .r3 {
        margin-top: 6vw;
    }
    #caption_gallery img {    
        max-width: 70vw;
        max-width: 100%;
    }
    #caption_gallery .r1 .image,
    #caption_gallery .r3 .image {
        margin-left: 0;
    }
    #caption_gallery .r2 .image {
        margin-right: 0;
    }    
    #caption_gallery .caption {    
        ax-width: 70vw; /* matches the img's max-width */
        margin-left: 2px;
        margin-left: 3px;
/*        margin-left: 0;*/
    }
    #caption_gallery h3 {
        display: inline-block;
        float: left;
    }
    #caption_gallery p {
        display: inline-block;
        text-align: left;
    }
    #caption_gallery .r1 {
        text-align: left;
    }
}




  /*------ S E C T I O N  "How Does It Work?" [s.how] ------*/
#how_work {
    background: #183a9b;
}
#how_work .content {
    width: 80%;
    max-width: 750px;
    margin: auto;
    text-align: center;
}
#how_work p {
    padding-top: 1%;
}




  /*------ S E C T I O N  "Collaboration-Driven" [s.collab] ------*/
#collab_driven  {
    background: #f57921;
}    
#collab_driven .content {
    width: 90%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}        
#collab_driven .main_feature {
    position: relative;
    background: rgba(240, 240, 240, 0.8);
    border: 3px solid #2e6da4;    
    display: flex;
    flex-direction: column;
    align-items: center;            
    border-radius: 2px;
}
#collab_driven .title {
/*    background: #F79753;*/
    border: 3px solid #2e6da4;
    display: flex;
    margin-top: calc(-5vw * 0.45);    
    z-index: 5;
}
#collab_driven h2 {
    background: rgba(255, 255, 255, 0.88);
    text-align: center;
    width: max-content;
    padding: 15px 20px;
    margin: auto;
    max-width: 90vw;
    border: 4px solid white;
}
#collab_driven .text.black {
    border: 2px solid #1E4669;
    width: 33vw;
    display: flex;
    flex-direction: column;
    margin: 1.5rem;
    margin-top: -1.8rem;
    margin-bottom: 0.5rem;    
    padding-bottom: calc(((13px + (40 - 13) * ((100vw - 300px) / (1300 - 300)))  + ((54px + (72 - 54) * ((100vw - 300px) / (1600 - 300)))/2) + 4%)) ;
    padding-top: 2.4%;    
    padding-left: 4.5vw;
    padding-right: 4.5vw;
    height: calc(35vw * 0.59);
}    
#collab_driven .text.black p {
    padding-left: 5px;
    margin: auto;
}
#collab_driven .collab_sub {    
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: center;    
    bottom: calc(5.79vw * 0.59);
}
#collab_driven button {
  margin: 0 auto;
}
#collab_driven img {
    width: 47vw;
    margin: auto;
}
#collab_driven .collab_img {
    margin: auto;    
    margin-left: calc(3vw * 0.59);
    display: flex;
}
#collab_driven .mobile_collab_img {
    display: none;    
}


    /*                  Media Queries begin here! [mS.collab]                  */
    /*                  Media Queries begin here!                   */
@media only screen and (max-width: 1300px) {
    #collab_driven .content {
        flex-direction: column;
        width: 75vw;
    }
    #collab_driven .collab_img img {
        display: none;
    }
    #collab_driven .mobile_collab_img {    
        display: flex;
    }
    #collab_driven .mobile_collab_img img {
        width: 100vw;
        max-width: 100%;        
    }
    #collab_driven .text.white {
        position: relative;
        width: 96%;
    }
    #collab_driven .title {
        margin-top: calc(-9vw * 0.45);
    }
    #collab_driven h2 {
        background: rgb(240, 240, 240);
        padding: calc(4px + (22 - 4) * ((100vw - 300px) / (1920 - 300))) calc(20px + (35 - 20) * ((100vw - 300px) / (1920 - 300)));
        top: 620px;        
        margin-top: 0;
    }    
    #collab_driven h2 {
        background: rgb(240, 240, 240);
        background: rgb(250, 250, 250);
    }
    #collab_driven .collab_sub {
        bottom: -2.5vw;
    }
    #collab_driven .text.black {
        width: calc( 380px + (520 - 380) * ( (100vw - 300px) / (1300-300) )   );
        max-width: 100%;
        padding-top: calc( (50px + (57 - 50) * ((100vw - 300px) / (1600 - 300)) ) + 26px  );
        padding-bottom: calc(( (59px + (67 - 59) * ((100vw - 300px) / (1920 - 300))) +
        (18px + (24 - 18) * ((100vw - 300px) / (1600 - 300))) ) + 4px );
        height: fit-content;
        -moz-height: fit-content;
        margin-bottom: 2vh;
        top: 20%;
    }
/*    firefox  */
    #collab_driven .text.black {
        -moz-margin-bottom: 2vh;        
        overflow: hidden;        
        height: 100%;
        
        margin-left: 0;
        margin-right: 0;
    }    
    collab_driven .main_feature {
        box-sizing: border-box;
        
    }
    #collab_driven .text.black {
        box-sizing: border-box;        
    }
 
    #collab_driven .text.black {
        width: 433px;
        width: 100%;
        max-width: 663px;
    }
    #collab_driven .main_feature {
/*
        idth: 100%;
        idth: fit-content;
        
        idth: 133.3333%;
*/
        
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    
    
    #collab_driven .text.black {
/*        works for Chrome, but not Firefox             */
        width: calc( 380px + (520 - 380) * ( (100vw - 300px) / (1300-300) )   );        
    }
    #collab_driven .text.black {
/*        works for Chrome, but not Firefox             */
        width: calc( 433px + (663 - 433) * ( (100vw - 300px) / (1300-300) )   );
        width: calc(433px + (663 - 433) * ((100vw - 300px) / (1300-300)));
/*
        
        idth: calc( 504.7px + (663 - 504.7) * ( (100vw - 300px) / (1300-500) )   );
        
*/
        
    }
    
    #collab_driven .text.black p {
        padding: 0 calc(30px + (50 - 30) * ((100vw - 300px) / (1600 - 300)) );
    }
}

@media only screen and (max-width: 750px) {
    #collab_driven .text.black {
        width: 70vw;        
    }
}
@media only screen and (max-width: 675px) {
    #collab_driven .text.black {
        width: 80vw;
    }
}
@media only screen and (max-width: 575px) {
    #collab_driven .text.black {
        width: 85vw;
        padding-top: 50px;
        padding-bottom: 60px;
    }
}

@media only screen and (max-width: 500px) {
    #collab_driven {
        position: relative;
    }
    collab_driven .mobile_collab_img img {
        width: 130vw;
    }
    #collab_driven .title {
        margin-top: calc(-16vw * 0.45);
    }
    #collab_driven .content {
        width: 100vw;
        max-width: 100%;
        box-sizing: border-box;        
    }
    #collab_driven .main_feature {
        border: 3px solid #2e6da4;    
        background: rgba(253, 227, 208, 0.9);
        box-sizing: border-box;        
    }
    #collab_driven .main_feature {
        width: 100%;
    }
    #collab_driven .text.black {
        border: none;
        margin: 0;  
        padding-top: 30px;
    }
    collab_driven .text.black {        
        max-width: 100%;
        width: 100%;
    }
    #collab_driven .text.black {
/*        border: 2px solid #121212;*/
        padding-left: 0;
        padding-right: 0;
        width: 100%;
    }
    #collab_driven .collab_sub {
        bottom: -10%;
    }    
}

@media only screen and (max-width: 420px) {
    #collab_driven .main_feature {
        width: 100vw;
    }
    #collab_driven .text.black {
        padding-left: 5px;
        padding-top: 20px;
    }
    #collab_driven .collab_sub {
        bottom: -8%;
    }
}    

@media only screen and (max-width: 350px) {
    #collab_driven .title,
    #collab_driven h2 {
        width: 100%;
        width: 90vw;
    }
    #collab_driven h2 {
        border: none;
        line-height: 1.2;
    }
    #collab_driven .collab_sub {
        bottom: -7%;
    }    
}

@media only screen and (max-width: 300px) {  
    #collab_driven .mobile_collab_img {
        width: auto;
        height: auto;        
    }
    #collab_driven .collab_sub {
        bottom: -5%;
    }
}




  /*------ S E C T I O N  "Our Students" [s.OurStudents] ------*/


  /*------ S E C T I O N  "Our Students" [s.OurStudents] ------*/
#our_students .part.one {
    width: 70%;
    margin: auto;
    text-align: center;
    margin-bottom: 1.5vw;
}    
#our_students .part.two {
    display: flex;
    width: 80%;
    margin: auto;
}
#our_students .part.two .box {
    width: 30%;
    margin: auto;
}
#our_students .ellipsis {
    letter-spacing: 0.7vw;
    font-weight: 600;
}
        


    /*                  Media Queries begin here!                   */
    /*                  Media Queries begin here!                   */

@media only screen and (max-width: 768px) {
    #our_students .part.one {
        margin-left: 3%;
        margin-bottom: 2vw;
    }
    #our_students .part.two {
        flex-direction: column;        
/*        margin-right: 0;*/
    }
    #our_students .part.two .box {
        width: 50%;
    }
    #our_students .part.two .box {
        max-width: 350px;        
        width: 100%;
    }
    #our_students .part.two .box.one,
    #our_students .part.two .box.two {
        margin-bottom: 1vw;
    }
    #our_students .ellipsis {
        letter-spacing: 1vw;
    }
}    

@media only screen and (max-width: 767px) {
    #our_students .part.one {
        margin-bottom: 2vw;
    }   
}

@media only screen and (max-width: 480px) {
    #our_students .part.two {
        width: 90%;
    }    
}




/*------ [s.Social ]  S E C T I O N  "Social Proof"  [s.Social ] ------*/

/*------ [s.Social ]  S E C T I O N  "Social Proof"  [s.Social ] ------*/
#social_proof * {
    box-sizing: border-box;
}
#social_proof {
    background: #D4DFE9;
}
#social_proof {   
    height: 28vw;
}
#social_proof h2 {
    margin-bottom: calc((18px + (15 - 18) * ((100vw - 300px) / (1920 - 300)))); 
}
#social_proof .content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}
#social_proof .text.black {
    position: relative;
    width: inherit;
}
#social_proof .slideshow-container {
    max-width: 100%;
}
#social_proof .mySlides {
    display: none;
    margin: 0 auto;
    width: 67.7vw; 
}
#social_proof .review {
    margin: auto;
    margin-top: calc(12px + (36 - 12) * ((100vw - 300px) / (1920 - 300)));
}
#social_proof .review_details {
    margin-top: 2%;
    margin-right: 30%;
}
#social_proof .fullReviewBtns {
    color: #3260DF;
    border: 1px dashed #A9BFD3;
    border-style: dashed solid;
    background: transparent;
    text-transform: lowercase;
    text-decoration: none;
    font-size: calc(12px + (13 - 12) * ((100vw - 300px) / (1920 - 300)));    
}
#social_proof .fullReviewBtns {    
    padding: 6px 10px;
    margin: auto;    
    margin-top: calc(12px + (36 - 12) * ((100vw - 300px) / (1920 - 300)));
    opacity: 85%;
}
#social_proof .fullReviewBtns:hover {
    color: #183a98;
    border: 1px dashed #f57921;
    opacity: 100%;
}
#social_proof img {
    margin-left: 25px;
    float: right;
    max-width: 30vw;
    min-width: 300px;
}
 /* next & previous buttons' container */
#social_proof .arrows {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -20%);
/*    align-self: center;*/
    margin: 0 auto;
    margin-top: 2.5rem;
    height: min-content;
    width: 85%;    
}
/* Next & previous buttons */
#social_proof .prev, #social_proof .next {
    user-select: none;
    cursor: pointer;
    background: linear-gradient(#9CB5CC, #8EABC5, #7FA0BD, #7FA0BD, #7FA0BD, #8EABC5, #9CB5CC);
    color: #243545;
    position: absolute;
    font-weight: 800;
    font-size: 22px;
    display: flex;
    justify-content: center;
    align-items: center;    
    width: auto;
    padding: 16px;
    border-radius: 5px;    
    height: calc((120px + (10) * ((100vw - 300px) / (300))));
    transition: 0.6s ease;
}
#social_proof .next {
    right: 0;
    border-radius: 5px;
}
/* On hover, add a black background color with a little bit see-through */
#social_proof .prev:hover, #social_proof .next:hover {
    background-color: rgba(0,0,0,0.8);
    color: white;
}
#social_proof .name {
    width: 70%;
    padding-right: 10px;
    text-align: end;
    font-style: italic;    
    margin-top: 18px;
}


    /*                  Media Queries begin here! [mS.social]                  */
    /*                  Media Queries begin here!                   */
@media only screen and (max-width: 1400px) {
    #social_proof img {
        margin-top: 1%;
    }
}
@media only screen and (max-width: 1350px) {
    social_proof {
        height: 67.2vw;
        height: calc( 435.2px * 1.1  );        
    }
    #social_proof {
        height: 100%;
    }
}

@media only screen and (max-width: 1200px) {
    #social_proof .arrows {
        width: 93%;
    }
}
@media only screen and (max-width: 1050px) {
    #social_proof .mySlides {
        width: 70vw;
    }
}
@media only screen and (max-width: 850px) {
    #social_proof .review_details {
        margin-top: 0;
    }
    #social_proof .mySlides.one .review_details,
    #social_proof .mySlides.two .review_details {
        margin-right: 10%;
    }    
    social_proof .name {
        margin-left: 75%;
    }
    #social_proof img {
        margin-top: 2.3%;
    }
    #social_proof .mySlides.one .name {
        width: 100%;    
    }
}
@media only screen and (max-width: 800px) {
    #social_proof .prev, #social_proof .next {
        width: 2vw;        
    }
}
@media only screen and (max-width: 800px) {
    #social_proof .review_details {
        margin-right: 0%;
    }   
    #social_proof .name {
        width: 100%;
        margin: auto;
        margin-right: auto;        
        argin-top: 18px;
    }
}
@media only screen and (max-width: 600px) {
    #social_proof .arrows {
        width: 100%;
    }   
}
@media only screen and (max-width: 767px) {
    #social_proof .arrows {
        width: 100%;
        idth: calc(85% + (85 - 100) * ( (-100vw - (-300px)) / (-1920 - (-300)) ) );    
        width: 98%;
    }
}
@media only screen and (max-width: 800px) {
    #social_proof .mySlides {
        width: fit-content;
    }
    #social_proof .review {
        width: 80%;    
    }
    #social_proof .image {
        text-align: center;        
        padding-left: 20px;
        padding-right: 20px;        
        display: flex;
        max-width: 100%;
    }
    #social_proof img {
        float: none;
        max-width: 50vw;
        margin: auto;        
    }
}            
@media only screen and (max-width: 350px) {
    #social_proof {
        position: relative;
    }
    #social_proof h2 {
        width: 94%;
    }
    #social_proof .mySlides {
        width: 98vw;
    }
    #social_proof .review {
        width: 80%;
        margin: auto;
    } 
    #social_proof .image {        
        width: fit-content;
    }
    #social_proof img {        
        min-width: inherit;
        max-width: 80%;
    }    
    #social_proof .arrows {
        width: 100%;
    }
    #social_proof .prev, #social_proof .next {
        width: fit-content;
        padding: 16px 3px;        
    }
    #social_proof .prev {
        padding-right: 8px;
    }
    #social_proof .next {
        padding-left: 8px;
    }    
}
@media only screen and (max-width: 300px) {
    #social_proof .arrows {
        width: 100%;
    }
}




  /*------ S E C T I O N  "Reviews" [s.Reviews / s.fullReviews] ------*/

  /*------ S E C T I O N  "Reviews" [s.Reviews / s.fullReviews] ------*/
#full_reviews .review_text {
    font-family: 'Baloo 2', sans-serif;
    letter-spacing: 0.5px;
    font-size: calc(18px + (22 - 18) * ((100vw - 300px) / (1600 - 300)));
}
#social_proof .more {
     display: none;
    }
.the_reviews {
    display: none; /* Hidden by default */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    position: fixed; /* Stay in place */
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    
    idth: 100%; /* Full width */
    max-width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    
    z-index: 1; /* Sit on top */
    z-index: 10;

}
.the_reviews #full_reviews_content {
    background-color: #fefefe;
    background: #BECFDE;
    background: #D9E3EC;
    argin: 15% auto; /* 15% from the top and centered */
    margin: auto;
/*    padding: 25px calc(20vw + (30 - 20) * -((100vw - 300px) / (1920 - 300)));*/
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on only screen size */ 
    width: 100%;
/*    max-width: 800px;*/
    
    padding-top: 25px;
    padding-bottom: 25px;
/*    height: 70vh;*/
    display: flex;
    border-top: 4px solid #A9BFD3;
    border-bottom: 4px solid #A9BFD3;
    box-sizing: border-box;
}
the_reviews #full_reviews_content {    
    height: 70%;
    height: 70vh;
/*    max-height: 400px;*/
    height: 44%;
/*    min-height: 400px;*/
    
    max-height: 80%;
    height: 400px;
    min-height: 40%;
}
.the_reviews #full_reviews_content {
/*    max-height: 80%;*/
/*    height: 400px;*/
    min-height: 65%;
    position: relative;
}
.the_reviews .full_review_slides {
    /*display: none;
    margin-top: calc(12px + (36 - 12) * ((100vw - 300px) / (1920 - 300)));*/
    border: 2px solid #A9BFD3;
    padding: calc(12px + (40 - 12) * ((100vw - 300px) / (1920 - 300))) calc(12px + (40 - 12) * ((100vw - 300px) / (1920 - 300)));
}
.the_reviews .full_review_slides {
/*    padding: 80vh 80vw;*/
/*    padding: 40vw 40vw;*/
    max-width: 800px;
    margin: auto;
    padding: calc(30px + (60 - 30) * ((100vw - 300px) / (1920 - 300))) calc(20px + (100 - 20) * ((100vw - 300px) / (1920 - 300)));
    padding-top: calc(35px + (80 - 35) * ((100vw - 300px) / (1920 - 300)));
}
#full_reviews .name {
    text-align: end;
    font-style: italic;
    width: 80%;
    margin-top: calc(12px + (16 - 12) * ((100vw - 300px) / (1920 - 300)));
}
#full_reviews .close {
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
/*    height: 100%;*/
/*    text-align: end;*/
/*    width: 100%;*/    
    padding-right: 20px;
    font-size: 2.5vw;
    font-size: calc(24px + (40 - 24) * ((100vw - 300px) / (1920 - 300)));
    opacity: 75%;
}

@media only screen and (max-width: 1000px) {
    .the_reviews #full_reviews_content {
        min-height: 50%;
    }
    .the_reviews .full_review_slides {
        border: none;
        border-left: none;
        border-right: none;
    }
    #full_reviews .close {
        padding-top: 5px;
        padding-right: 15px;
    }
}



  /*------ S E C T I O N  "CTA Four" ------*/
      /*------ [s.4cta / s.cta4] ------*/ 

#cta_4 {
    background-color: #f57921;
    max-width: 100%;
    text-align: center;
}

#cta_4 p {
    max-width: 900px;
    width: 85%;
    margin: auto;
    margin-bottom: 0;
}
    



  /*------ S E C T I O N  "Parallax #2: 'Join the Tech Leaders of Tomorrow'" [ s.Parallax / 2.parallax] ------*/
#parallax_2 {
    overflow: hidden;
    position: relative;
    margin: 0 auto;
    height: 840px;
}    
#parallax_2 .image {    
    background-image: url("img/background_img/tech_leaders_of_tomorrow--1920w.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    filter: blur(8px) brightness(90%);
    -webkit-filter: blur(8px) brightness(90%);
}   
#parallax_2 .parallax2_sub {
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    padding: 20px;    
    border: 3px solid rgba(250,250,250,1);
    border-radius: 3px;
}
#parallax_2 h2 {
    filter: none;
    width: 90%;
    margin: auto;
    padding-bottom: 2rem;
    padding-top: 1.5rem;    
}

#parallax_2 .letter_spacing {
    etter-spacing: 3px;
}

    

    /*                  Media Queries begin here! [m2.parallax2]                  */
    /*                  Media Queries begin here!                   */
@media only screen and (max-width: 1750px) {
    #parallax_2 .parallax2_sub h2 {
        width: 75%;
        margin: auto;
    }
}
@media only screen and (max-width: 1200px) {
    #parallax_2 {
        max-height: 70vh;
    }
}
@media only screen and (max-width: 840px) {
    #parallax_2 .parallax2_sub {
        padding: 10px 20px;
    }
}
@media only screen and (max-width: 800px) {
    #parallax_2  {
        max-height: 65vh;
    }
}
@media only screen and (max-width: 600px) {
    #parallax_2 {
        min-height: 55vh;
    }
    #parallax_2 .parallax2_sub {    
        padding: 7px 15px;
    }
}
@media only screen and (max-width: 300px) {
    #parallax_2 .parallax2_sub {
        border: 3px solid rgba(250,250,250,0.8);
    }
}




  /* ------ S E C T I O N  "Final CTA" [s.5cta / s.cta5 / s.finalCTA / s.finalCTA] ------ */
#final_cta {
    background-color: #183a9b;
}
#final_cta .content {
    width: 90%;
    margin: 0 auto;
    text-align: center;
}
#final_cta h2 {
    margin: 0;
    padding-bottom: 2.5%;
    text-align: center;
}
#final_cta .text_content {    
    width: 70%;
    max-width: 700px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 auto;
    margin: 0 auto;
}
#final_cta p:nth-child(2) {
    padding-top: 1.5%;
}
#final_cta p:nth-child(3) {
    padding-top: 0.5%;
}
#final_cta p:nth-child(4) {
    padding-top: 0.5%;
}
#final_cta h3 {
    text-align: center;
    padding-top: 2.2%;   
}
#final_cta .final_cta_sub {
    width: 100%;
    text-align: center;   
}
    

    /*                  Media Queries begin here! [mS.finalcta]                  */
    /*                  Media Queries begin here!                   */
@media only screen and (max-width: 790px) {
    #final_cta h2 {
        width: 83%;
        margin: auto;
    }
}
@media only screen and (max-width: 767px) {
    #final_cta .text_content {
        min-width: 100%;
        max-width: 94vw;
    }
    #final_cta p:nth-child(1) {
        min-width: 250px;
        width: 60%;
        max-width: 90vw;
    }
    #final_cta p:nth-child(2) {
        padding-top: 3vw;
        width: 100vw;
        max-width: 100%;
        margin: 0 auto;
    }
    #final_cta p:nth-child(3) {
        padding-top: 1vw;
    }
    #final_cta p:nth-child(4) {
        padding-top: 3vw;
        width: 100%;
    }
}    
@media only screen and (max-width: 720px) {
    #final_cta p:nth-child(1) {
        width: 67%;
    }
}   
@media only screen and (max-width: 645px) {
    #final_cta p:nth-child(1) {
        width: 62%;
    }
    #final_cta h3 {
        width: 79%;
    }
}
@media only screen and (max-width: 460px) {
    #final_cta h2 {
        width: 100%;
    }
    #final_cta p:nth-child(1) {
        width: 90%;
    }
}



  /*------ "Footer" [s.footer] ------*/

  /*------ "Footer" [s.footer] ------*/
footer {
    font-size: calc(12px + (16 - 12) * ((100vw - 300px) / (1920 - 300)));
    letter-spacing: 1px;
    background-color: #070F17;
    color: aliceblue;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    padding-top: calc(34px + (60 - 34) * ((100vw - 300px) / (1920 - 300)));
    padding-bottom: calc(34px + (70 - 34) * ((100vw - 300px) / (1920 - 300)));
}
footer .part.one {
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    text-align: center;    
}
footer .part.two {
    width: 90%;
    margin: 0 auto;
    margin-top: 1.5px;
}
footer p {
    display: inline-block;
}
footer a {
    color: aliceblue;
    text-decoration: none;
}
footer #f_link1 {
    margin-right: 5px;
}
footer #f_link2 {
    margin-right: 5px;
    margin-left: 5px;
}
footer #f_link3 {
    margin-left: 5px;
}
@media only screen and (max-width: 390px) {
    footer #all_rights {
        display: block;
    }
}
@media only screen and (max-width: 300px) {
    footer .part.one {
        flex-direction: column;
        padding-bottom: 10px;
        margin-bottom: 10px;
        border-bottom: 1px solid rgba(250,250,250,0.4);        
        display: block;
    }
    footer .footer_vert_line {
        display: none;
    }
    footer #f_link1 {        
        margin-right: 0;
    }
    footer #f_link2 {
        margin-right: 0;
        margin-left: 0;
        margin-top: 2px;
    }
    footer #f_link3 {
        display: block;
        margin-left: 0;
        margin-top: 2px;
    }        
}
@media only screen and (max-width: 270px) {
    footer #_2021_openhub {
        display: block;
    }
}



        /*          The End         */

        /*          The End         */

        /*          The End         */

        
        


  /*------ S E C T I O N  "Modal / Image Gallery" [s.Modal / s.Images / s.Img] ------*/

  /*------ Modal Lightbox ------*/

/* The Modal (background) */
.modal {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: black;
    overflow: auto;
    z-index: 51;
}
.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;    
}    
.modalSlides {
    display: none;    
    text-align: center;    
    height: 80%;
    width: calc(300px + (900 - 300) * ( (100vw - 300px) / (1920-300)));
    margin: 0 auto;
}
.modalSlides img {
    max-width: 100%;
    max-height: 100%;
    display: flex;
}   
.prev_2, .next_2 {
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
    position: absolute;
    background-color: darkgrey;
    background: rgba(240,240,240, 0.8);
/*    background: linear-gradient(90deg, rgba(240,240,240, 0.8), black );*/
    color: black;    
    border: 1px solid lightgrey;
    border-radius: 0 3px 3px 0;
    font-size: calc(16px + (30 - 16) * ( (100vw - 300px) / (1920-300)));
    font-weight: 800;
    top: 50%;
    transform: translateY(-50%);
    
    width: auto;
    padding: 32px 16px;
/*    margin-top: -50px;  */        
    transition: 0.6s ease;
    transition: background-color 0.3s;
    transition: background 0.3s;    
/*    z-index: 30;   */    
    padding: 10vh calc(16px + (26 - 16) * ((100vw - 300px) / (1920-300)));
}   
.next_2 {
  right: 0;
  border-radius: 3px 0 0 3px;
}
.prev_2:hover {
    background: #fff;
}
.prev_2:hover,
.prev_2:focus,
.next_2:hover,
.next_2:focus {
    background: grey;
    color: white;
    border: 1px solid lightgrey;    
}

/* On hover, add a black background color with a little bit see-through */
.prev_2:hover,
.next_2:hover {    
    background-color: rgba(30, 30, 30, 1);
}



   /* ----- ----- Modal Close [s.CloseModal / s.Modal] ----- -----  */

   /* ----- ----- Modal Close [s.CloseModal / s.Modal] ----- -----  */
.clowse {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    justify-content: flex-end;    
    color: #f1f1f1;
    height: 80%;
    width: calc(600px + (600 - 00) * ((100vw - 300px) / (1600 - 300)));
}        
.modal .aspect-ratio {
    overflow: hidden;
    position: relative;
    right: 0;
    height: 0;
    width: 10%;
    padding-top: 10%;        
}    
    
.test_1 {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-end;    
}    
.test_1 .close_icon_position {  
    cursor: pointer;
    box-sizing: border-box;
    height: 100%;
    width: 100%;    
}    
.test_1 .click_area {
    position: relative;    
    box-sizing: border-box;
    padding-top: 15px;
    padding-right: 15px; 
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.test_1 .shape_change {
    box-sizing: border-box;
    border: 1px solid white;            
    display: flex; /* maybe not needed */
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    transition: border-radius 0.6s, opacity 0s, width 0.8s, height 0.8s;
    opacity: 30%;
}    
.test_1 .click_area:hover > .shape_change {  /*  square - to - C I R C L E  */ 
    border-radius: 50%;
    opacity: 100%;
}
 .test_1 .animation_area_1 {   
    position: absolute;
    box-sizing: border-box;
    width: 55%;
    height: 55%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;    
}    
.test_1 .animation_area_1:hover ~ .shape_change,    /*  CIRCLE - SIZE  */
.test_1 .animation_area_1:focus ~ .shape_change {
    margin-bottom: 6%;
    margin-left: 6%;
    margin-right: 7%;
    width: 50%;
    height: 50%;
}    
.test_1 .close_1 {
    box-sizing: border-box;       
    color: white;
    font-size: calc(50px + (100 - 50) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 800;
    transition: transform 1s, margin-right 0s, margin-bottom 0s;   
}
@media only screen and (max-height: 530px) {
    .clowse {
        width: 60%;
    }
    .test_1 .close_1 {
        font-size: 40px;
    }
}



  /*------ S E C T I O N  "Top Button" [s.Top / s.Up] ------*/

  /*------ S E C T I O N  "Top Button" [s.Top / s.Up] ------*/
#topBtn {
    cursor: pointer;
    display: none;
    position: fixed;
/*
    right: 28px;
    bottom: 34px;
*/
    right: 40px;
    bottom: 48px;
    
    right: 20px;
    bottom: 34px;
    margin: -5px 0px;
    width: 4em;
    border: 1px solid rgba(10,0,0, 0.35);
    z-index: 50;
}
#topBtn:hover {
    background: rgba(0,0,0, 0.35);
    transition: background 0.1s;
    border: none;    
}
#topBtn:hover #up_arrow_1,
#topBtn:hover #up_arrow_2 {
    border-right: solid rgba(250,250,250, 1);
    border-bottom: solid rgba(250,250,250, 1);
    transition: border-right 0.1s, border-bottom 0.1s;
}
#topBtnRelative {
    position: relative;
    height: 0;
    width: 100%;
    padding-top: 100%;
}
#theTopBtn {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;        
    border-radius: 100% 100% 10% 10%;    
}   
#topBtn_content {    
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}    
#topBtn #up_arrows {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
    width: 100%;
}
#topBtn #up_arrow_1 {
    position: absolute;
    border: solid rgba(40,0,0, 0.45);
    border-width: 0 4px 4px 0;
    padding: 8px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-135deg);
    margin-top: -4px;
}
#topBtn #up_arrow_2 {
    position: absolute;
    border: solid rgba(40,0,0, 0.45);
    border-width: 0 4px 4px 0;
    padding: 8px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-135deg);
    margin-top: 16px;
}

@media only screen and (max-width: 900px) {
    #topBtn {
        bottom: 7%;        
        width: 3.8em;
    }
}    
    




/*------ [s.Animation]  A N I M A T I O N  [s.Animation] ------*/


/* Fading Animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}
@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}
@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}


/* ---------------------------------- */
/* ---------------------------------- */
/* ---------------------------------- */
/* ---------------------------------- */