html, body {
    box-sizing: border-box;
    font-weight: normal;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    text-size-adjust: none;
  }
*, *::before, *::after {
    box-sizing: inherit;
    }
* {
	padding: 0;
	margin: 0;
	}
h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
    font-size: 100%;
    }


/*_____________layout-start____________*/

@media only screen and (orientation: landscape) and (max-height: 500px){
#container { 
    grid-template-rows: 8.83vh 91.17vh 200vh 100vh 10vh 190vh 91.17vh 8.83vh;
    }
}
@media only screen and (max-width: 767px) {
#container { 
    grid-template-areas:
    "header header header header header header header header"
    "title title title title title title title title"
    "description description description description description description description description"
    "bateson bateson bateson bateson bateson bateson bateson bateson"
    "purpose_title purpose_title purpose_title purpose_title purpose_title purpose_title purpose_title purpose_title"
    "purpose purpose purpose purpose purpose purpose purpose purpose"
    "reconfigure reconfigure reconfigure reconfigure reconfigure reconfigure reconfigure reconfigure"
    "footer footer footer footer footer footer footer footer";
    grid-template-columns: 8fr, 1fr;
    grid-template-rows: 8.83vh 91.17vh 200vh 100vh 10vh 190vh 91.17vh 8.83vh;
    }
}
.container { 
    display: grid;
    max-width: 100%;
    position: relative;
    margin: auto;
    grid-template-areas:
    "header header header header header header header header header header header header"
    "title title title title title title title title title title title title"
    "description description description description description description description description description description description description"
    "bateson bateson bateson bateson bateson bateson bateson bateson bateson bateson bateson bateson"
    "purpose_title purpose_title purpose_title purpose_title purpose_title purpose_title purpose_title purpose_title purpose_title purpose_title purpose_title purpose_title"
    "purpose purpose purpose purpose purpose purpose purpose purpose purpose purpose purpose purpose"
    "reconfigure reconfigure reconfigure reconfigure reconfigure reconfigure reconfigure reconfigure reconfigure reconfigure reconfigure reconfigure"
    "footer footer footer footer footer footer footer footer footer footer footer footer";
    grid-template-columns: 12fr, 1fr;
    grid-template-rows: 8.83vh 91.17vh 100vh 100vh 10vh 90vh 91.17vh 8.83vh;
    }

/*container for the single pages*/

#pagecontainer {
	display: grid;
    max-width: 100%;
    position: relative;
    margin: auto;
    grid-template-areas:
    "header header header header header header header header header header header header"
    "title title title title title title title title title title title title"
    "cont cont cont cont cont cont cont cont cont cont cont cont"
    "footer footer footer footer footer footer footer footer footer footer footer footer";
    /*grid-template-columns: 12fr 1fr;*/
    grid-template-rows: 8.83vh 44vh 38.34vh 8.83vh;
}    
/*layout-end*/

/*header styles including logo and first nav*/

header {
    background-color: rgba(0, 0, 0, 0.25);
    grid-area: header;
    z-index: 3;
    height: fit-content;
    height: -moz-fit-content;
    height: -ms-fit-content;
    height: -o-fit-content;
    height: -webkit-fit-content;
    /*position: sticky;
    top: 0;*/
    }
.pageheader{
	background-color: rgba(0, 0, 0, 0.60);
}

/*logo for firefox mobile*/
@supports (-moz-appearance:none ) {
@media only screen and (orientation: landscape) and (max-height: 500px) {
.header #MyLogo a, .header #MyLogo1 a {
    font-size: 2em;
    padding: 2.5vh 0 0 3vw;
    }
}
@media only screen and (max-width: 500px) {
    header #MyLogo a, header #MyLogo1 a {
    font-size: 1.9em;
    padding: 1.5vh 0 0 3vw;
    }
}
}

/*logo*/
#MyLogo, #MyLogo1 {
    float: left;
    }
#MyLogo a {
    display: block;
    position: relative;
    color: #0026FF;
    text-align: left;
    padding: 0.2em 0 0 3vw;
    text-decoration: none;
    font-family: 'Permanent Marker', cursive;
    font-weight: normal;
    font-size: 2.1em;
    letter-spacing: 0.1em;
    text-shadow: -0.5px 0.5px rgb(20, 20, 20);
    }

#MyLogo1 a {
    display: block;
    position: relative;
    color: #B400FC;
    text-align: left;
    padding: 0.2em 0 0 3vw;
    text-decoration: none;
    font-family: 'Permanent Marker', cursive;
    font-weight: normal;
    font-size: 2.1em;
    letter-spacing: 0.1em;
    text-shadow: -0.5px 0.5px rgb(20, 20, 20);
}
#MyLogo a:hover{
    color: #B400FC;
    }
#MyLogo1 a:hover{
    color: #0026FF;
     }

/*--navigation menu--*/
@media only screen and (orientation: landscape) and (max-height: 500px) {
.menu {
    flex-direction: row;
    display: flex;
    flex-wrap: wrap;
    float: right;
    }
} 
@media only screen and (orientation: landscape) and (max-width: 640px) {
.nav-link {
    padding:13px 25px !important;
    }
}
.menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    }
.nav-link {
    display: block;
    color: rgba(255, 255, 255, 0.90);
    font-family: 'Poppins', sans-serif;
    text-align: center;
    font-size: 1.15em;
    letter-spacing: 0.2em;
    padding:13px 30px;
    text-decoration: none;
    z-index: 1;
    }
.pageheader .nav-link {
    text-align: center;
    color: rgba(255, 255, 255, 0.95);
    padding:15px 30px;
}
.nav-link:hover 
 {
    color: #B400FC;
    }
.nav-link:active {
    color: #0026FF;
    }    
#resourceslink, #bloglink, #aboutlink, #purposelink {
    color: #0026FF;
    text-decoration: underline #0026FF;
    }
.foot-nav .nav-item {
    float: right;
    }

/*menu*/
.header .menu , .pageheader .menu {
    clear: both;
    max-height: 0;
    transition: max-height .2s ease-out;
    }
.header .menu-icon, .pageheader .menu-icon {
    cursor: pointer;
    float: right;
    padding: 28px 20px;
    position: relative;
    user-select: none;
    }
.header .menu-icon .nav-icon, .pageheader .menu-icon .nav-icon {
    background: rgba(255, 255, 255, 0.90);
    display: block;
    height: 2.2px;
    position: relative;
    transition: background .2s ease-out;
    width: 18px;
    }
.header .menu-icon .nav-icon:before, .pageheader .menu-icon .nav-icon:before,
.header .menu-icon .nav-icon:after,.pageheader .menu-icon .nav-icon:after {
    background: rgba(255, 255, 255, 0.90);
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
    }
.header .menu-icon .nav-icon:before, .pageheader .menu-icon .nav-icon:before {
    top: 7px;
    }
.header .menu-icon .nav-icon:after, .pageheader .menu-icon .nav-icon:after {
    top: -7px;
    }

/* menu btn */
.header .menu-btn, .pageheader .menu-btn {
    display: none;
    }
.header .menu-btn:checked ~ .menu, .pageheader .menu-btn:checked ~ .menu {
    max-height: 240px;
    }
.header .menu-btn:checked ~ .menu-icon .nav-icon, .pageheader .menu-btn:checked ~ .menu-icon .nav-icon {
    background: transparent;
    }

.header .menu-btn:checked ~ .menu-icon .nav-icon:before, .pageheader .menu-btn:checked ~ .menu-icon .nav-icon:before {
    transform: rotate(-45deg);
    top:0;
    }
.header .menu-btn:checked ~ .menu-icon .nav-icon:after, .pageheader .menu-btn:checked ~ .menu-icon .nav-icon:after {
    transform: rotate(45deg);
    top:0;
    }

/* 48em = 768px @ 16pt font */
@media (min-width: 50.0625em) { /* = 801px */
.menu{
    background-color: transparent;
    }
.nav-item {
    float: left;
    background-color: transparent;
    }
.pageheader .nav-link {
    color: rgba(255, 255, 255, 0.95);
    }
.pageheader .nav-item {
    float: left;
    background-color:transparent;
    }
.nav-link {
    padding: 13px 30px;
    color: rgba(255, 255, 255, 0.90);
    }
.header .menu, .pageheader .menu {
    clear: none;
    float: right;
    max-height: none;
    }
.header .menu-icon, .pageheader .menu-icon {
    display: none;
    }
}

/*---title section styles---*/

/*title for firefox mobile*/
@supports (-moz-appearance:none ) {
@media only screen and (orientation: landscape) and (max-height: 500px) {
#type #question {
    font-size: 1.5em !important;
    }
  }
@media only screen and (max-width: 500px) {
    #type #question {
    font-size: 1.5em;
    }
  }
}

/*--title section responsive--*/
/*landscape title section responsive styles*/
@media only screen and (orientation: landscape) and (max-height: 500px) {
#question {
    font-size: 1.77em !important;
    }
#title .jumper {
    display: none;
    }
#title .type {
    margin-left: 27%;
    
    }
}

@media only screen and (orientation: portrait) and (max-height: 640px) {
#question {
    font-size: 1.5em !important;
    } 
}

/*--portrait & general responsive styles--*/
@media only screen and (max-width: 1200px) {
#title {
    background-position-x: right 36.57%;
    }
}
@media only screen and (max-width: 1100px) {
#title {
    background-position-x: calc(100% - 37.97%);
    }
}
@media only screen and (max-width: 1005px) {
#title {
    background-position-x: calc(100% - 38.97%)
    }
}
@media only screen and (max-width: 900px) {
#title {
    background-position-x: calc(100% - 39.97%)
    }
}
@media only screen and (max-width: 810px) {
#title {
    background-position-x: calc(100% - 40.37%)
    }
.title #type {
    margin-left: 13%;
    }
.title .type #question {
    text-align: right;
    font-size: 2.2em;
    animation: none;
    /*overflow-wrap: break-word;*/
    padding-right: 10vw;
    padding-left:10vw; 
    white-space: break-spaces;
    }
}
@media only screen and (max-width: 767px) {
    #title .jumper {
        display: none;
        }
    }
@media only screen and (max-width: 675px){
#title {
    background-position-x: calc(100% - 41.15%)
    }
.title .type #question { 
    font-size: 2em;
    } 
}
@media only screen and (max-width: 593px){
#title {
    background-position-x: calc(100% - 41.57%)
    }
.title .type #question {
    font-size: 1.8em;
    } 
}
@media only screen and (max-width: 430px) {
#title {
    background-position-x: calc(100% - 42.47%)
    }
.title .type #question {
    font-size: 1.8em;
    } 
}

/*--title section styles general--*/
.title {
    grid-area: title;
    background-image: linear-gradient(240deg, rgba(0,38,255,0.8), rgba(180,0,252,0.8)), url('../images/TechnologyHuman.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll;
    background-position-x: right 34.87%;
    max-width: 100%;
    height: auto;
    margin-top: -8.83vh;
    position: relative;
    }
.title .type { 
    position: absolute; 
    padding-top: 54vh; 
    width: auto;
    display: flex;
    margin-left: 15%;
    }
#question {
    font-family: 'Permanent Marker', cursive;
    font-weight: 300;
    text-align: center;
    color: rgba(255, 255, 255, 0.90);
    font-size: 3.5vw;
    letter-spacing: 0.09em;

    overflow: hidden; /* Ensures the content is not revealed until the animation */
    border-right: .08em solid transparent; /* The typwriter cursor */
    white-space: nowrap;/* Keeps the content on a single line */
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */

    animation:
        typing 7s steps(40, end),
        blink-caret .95s step-end 8.5;
        /*slidein 0.05s ease 7s forwards; nueva linea*/
}
/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/*@keyframes slidein {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }*/
  
  /* The typewriter cursor effect  tambien lo meti nuevo*/
  
@keyframes blink-caret {
    from,
    to {
      border-color: rgba(255, 255, 255, 0.90);
    }
    50% {
      border-color: transparent;
    }
  }

/*button at the end of each section*/
.jumper { /*positioning of container for the button to descriptionription section*/
    height: 40px;
    position: absolute;
    margin-top: 88.7vh; 
    margin-left: 50%;
} 
.button { /*div class of the button*/
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
#chevron, #chevron2 { /*the button for colored background*/
    font-size: 30px;
    background-color: rgba(0, 0, 0, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    padding: 4px 16px;
    border-radius: 8px;
    border-width: 1px;
    box-shadow: 0 3px 5px 0 rgba(0,0,0,0.2), 0 3px 5px 0 rgba(0,0,0,0.6); 
}
#chevron1, #chevron3 { /*the button for white background*/
    font-size: 30px;
    border-color: rgba(0, 0, 0, 0.1);
    background-color: rgba(255, 255, 255, 0.2);
    padding: 4px 16px;
    border-radius: 8px;
    border-width: 1px;
    box-shadow: 0 3px 5px 0 rgba(0,0,0,0.2), 0 3px 5px 0 rgba(0,0,0,0.6);
}
#chevron:hover, #chevron2:hover {
    background-color: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 10px 0 rgba(0,0,0,0.6), 0 6px 10px 0 rgba(0,0,0,0.2);
    cursor:pointer;
}
#chevron1:hover, #chevron3:hover {
    border-color: rgba(0, 0, 0, 0.2);
    background-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 10px 0 rgba(0,0,0,0.6), 0 6px 10px 0 rgba(0,0,0,0.2);
    cursor:pointer;
}
#chevron:active, #chevron2:active {
    background-color: rgba(0, 0, 0, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 3px 5px 0 rgba(0,0,0,0.2), 0 3px 5px 0 rgba(0,0,0,0.6);
}
#chevron1:active, #chevron3:active {
    border-color: rgba(0, 0, 0, 0.1);
    background-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 3px 5px 0 rgba(0,0,0,0.2), 0 3px 5px 0 rgba(0,0,0,0.6);
}

/*title section for the pages*/
.page_title {
    grid-area: title;
    background-image: url('../images/TechnologyHuman.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll;
    background-position: center;
    background-position-x: 64.75%;
    background-position-y: 75%;
    max-width: 100%;
    max-height: 100%;
    margin-top: -8.83vh;
}
.page_title .pages_title {
    position: relative; 
    padding-top: 32vh;
    padding-right: 3em;
    width: auto;    
}
.page_title .pages_title h1 {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    text-align: right;
    color: #7600A5;
    font-size: 3.5vw;
    letter-spacing: 0.09em;
}

/*descriptionription section*/

/*descriptionription section responsive*/

/*descriptionription section styles for firefox mobile*/
@supports (-moz-appearance:none) {
    @media only screen and (orientation: landscape) and (max-height: 500px)
    {
#description .description1{
    font-size: 1rem !important; 
    padding-top: 0vh !important;
    
    }
#description .description2{
    font-size: 1rem !important; 
    padding-top: 0vh !important; 
    }
#description .description1 h2 { 
    font-size: 1.8rem !important;
    }
#description .description2 h2 { 
    font-size: 1.8rem !important;
    padding-top: 0vh !important;
    }     
}
@media only screen and (max-width: 600px) {
#description .description1{
    font-size: 1rem !important;
    margin-top: 20% !important;
    }
#description .description2 { 
    font-size: 1rem !important;
    margin-top: 20% !important;
    }
#description .description1 h2 { 
    font-size: 1.8rem !important;
    }
#description .description2 h2 { 
    font-size: 1.8rem !important;
    }    
}
}

/*decription section responsive portrait*/   
@media only screen and (max-width: 767px) { 
#description .jumper1 { 
    display: none;
    }
#description {
    flex-direction: column; 
    }
#description .description1 {
    padding: 0vw 3vw 0vw 3vw;
    font-size: 1.3rem;
    line-height: 2.2; 
    margin-top: 20%;
    border-bottom: 2px solid #7600A5;
    }
#description .description1 h2 { 
    font-size: 2rem;
    line-height: 1.5;
    padding-top: 2vh;
    }
#description .description2 { 
    padding: 0vw 3vw 0vw 3vw;
    font-size: 1.3rem;
    line-height: 2.2;
    margin-top: 20%;
    }
#description .description2 h2 {
    font-size: 2rem;
    line-height: 1.5;
    padding-bottom: 2vh;
    }
}
@media only screen and (orientation: portrait) and (max-height: 640px){
#description .description1 {
    font-size: 1.2rem;
    line-height: 1.9; 
    margin-top: 5%;
    }
#description .description1 h2 { 
    font-size: 1.8rem;
    }
#description .description2 { 
    font-size: 1.2rem;
    line-height: 1.9;
    margin-top: 5%;
    }
#description .description2 h2 {
    font-size: 1.8rem !important;
    } 
}

/*decription section responsive landscape*/
@media only screen and (orientation: landscape) and (max-height: 500px) {
#description .jumper1 { 
    display: none;
    }
#description {
    flex-direction: column; 
    }
#description .description1 {
    padding: 5vw 3vw 0vw 3vw;
    font-size: 1.2rem;
    line-height: 2.2;   
    border-bottom: 2px solid #0019A8;
    height: 100%;
    margin-top: 3%;
    }
#description .description1 h2 { 
    font-size: 2rem;
    line-height: 1.5;
    padding-top: 2vh;
    }
#description .description2 { 
    padding: 5vw 3vw 0vw 3vw;
    font-size: 1.2rem;
    line-height: 2.2;
    height:100%;
    margin-top: 3%;
    }
#description .description2 h2 {
    font-size: 2rem;
    line-height: 1.5;
    padding-bottom: 2vh;
    }  
}
@media only screen and (orientation: landscape) and (max-width: 640px) {
#description .description1 {
    padding: 0vw 3vw 0vw 3vw;
    font-size: 1.1rem;
    line-height: 2.1;   
    }
#description .description1 h2 { 
    font-size: 1.75rem;
    }
#description .description2 { 
    padding: 0vw 3vw 0vw 3vw;
    font-size: 1.1rem;
    line-height: 2.1;
    }
#description .description2 h2 {
    font-size: 1.75rem;
    } 
}  
        
/*descriptionription section general styles*/
.description {
    grid-area: description;
    display: flex;
    max-width: 100%;
    position: relative;
    height: 100%;
    max-height: 100%;
    border-left: 2px solid #7600A5;
    border-right: 2px solid #0019A8;
}
.description1 { /*descriptionription of blog on the left side*/
    flex-basis: 50%;
    text-align: justify;
    margin: auto;
    padding: 8vw 3vw 0vw 3vw;
    font-family: 'Lora', serif;
    font-size: 1.14em;
    line-height: 1.8;
    color: rgba(0, 0, 0, 0.75);
}
.description1 h2  { 
    font-family: 'Poppins', sans-serif;
    font-size: 4.4vw;
    letter-spacing: 1.5px; 
    color: #0019A8;
    text-align: left;
    font-weight: 600;
    line-height: 3;
    padding-top: 6vh;
    
}
.description1 #link_to_blog:hover {
    color: #7600A5;
}
.description2 { /*descriptionription of resources on the right side*/
    flex-basis: 50%;
    text-align: justify;
    margin: auto;
    padding: 0vw 3vw 0vw 3vw;
    font-family: 'Lora', serif;
    font-size: 1.14em;
    line-height: 1.8;
    color: rgba(0, 0, 0, 0.75);
}
.description2 h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 4.4vw;
    letter-spacing: 1.5px;
    color: #7600A5;
    text-align: right;
    font-weight: 600;
    line-height: 3;
    padding-bottom: 9vh;
}
.description2 #link_to_resources:hover {
    color: #0019A8;
}
.jumper1 { /*positioning of container for the button to quote section*/
    height: 40px;
    position: absolute;
    margin-top: 88.7vh;
    margin-left: 50%;
}

/*Bateson quote section*/

/* Bateson quote section responsive styles for firefox mobile*/
@supports (-moz-appearance:none) {
@media only screen and (orientation: landscape) and (max-height: 500px) {
#bateson .bateson1 { 
    font-size: 1.1em !important;
    margin-top: 10vh !important;
    padding: 0vh 6vw !important;
    }
#bateson .bateson1 h2 {
    font-size: 1.3em !important;
    line-height: 2.5 !important;
    padding-top: 1vh !important;
    }                     
}
@media only screen and (max-width: 600px) {
#bateson .bateson1 { 
    font-size: 1.1em !important;
    }
#bateson .bateson1 h2 {
    font-size: 1.3em !important;   
    }   
}
}

/* Bateson quote section responsive styles landscape*/
@media only screen and (orientation: landscape) and (max-height: 500px) {
#bateson .jumper2 { 
    display: none;
    }
#bateson { 
    flex-direction: column;  
    }
#bateson .bateson1 {
    padding: 1vh 6vw;
    font-size: 1.3em;
    line-height: 2;
    margin-top: 18vh;
    }
#bateson .bateson1 h2 {
    font-size: 1.4em;
    line-height: 3;
    padding-top: 4vh;
    } 
}
@media only screen and (orientation: landscape) and (max-width: 640px) {
#bateson .bateson1 {
    padding: 0vh 6vw;
    font-size: 1.3em;
    line-height: 2;
    margin-top: 8vh;
}
#bateson .bateson1 h2 {
    font-size: 1.4em;
    line-height: 3;
    padding-top: 4vh;
    } 
}

/* Bateson quote section responsive styles portrait*/
@media only screen and (max-width: 767px) { 
.bateson .jumper2 { 
    display: none;
    }
.bateson { 
    flex-direction: column;  
    }
.bateson .bateson1 {
    padding: 5vh 6vw;
    font-size: 1.3em;
    line-height: 2;
    margin-top: 18vh;
}
.bateson .bateson1 h2 {
    font-size: 1.4em;
    line-height: 3;
    padding-top: 4vh;
    }
}

/*Bateson quote section general styles*/
.bateson {
    grid-area: bateson;
    display: flex;
    max-width: 100%;
    position: relative;
    height: 100%;
    background-size: cover;
    background-position-y: 55%;
    background-position-x: 65%;
    background-repeat: no-repeat;
    background-image: linear-gradient(240deg, rgba(0,38,255,0.1), rgba(180,0,252,0.3)), url('../images/Particle (Gerd altmann pixabay).jpg');
}
.bateson1 {
    flex-basis: 50%;
    background-color: rgba(66, 91, 216, 0.80);
    text-align: center;
    padding: 27.3vh 6vw;
    font-family: 'Lora', serif;
    font-size: 1.3em;
    line-height: 2;
    color: rgba(255, 255, 255, 0.90);
}
.bateson1 h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.4em;
    font-weight: 500;
    line-height: 3;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.90);
    text-align: center;
}
.bateson1 #link_to_bateson:hover {
    color: rgb(210, 210, 210)
}
.bateson2 {
    flex-basis: 50%;
    text-align: center;
    color: white; 
    visibility: hidden;
}
.bateson2 h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 2.2vw;
    font-weight: 500;
    line-height: 3;
    letter-spacing: 1.5px;
    color: white;
    text-align: center;
}
.jumper2 { /*positioning of container for the button to purpose section*/
    height: 40px;
    position: absolute;
    margin-top: 88.7vh;
    margin-left: 50%;
 }
 
/*purpose section*/

/*purpose section responsive for firefox mobile*/
@supports (-moz-appearance:none) {
@media only screen and (orientation: landscape) and (max-height: 500px) {
#purpose_title h2 {
    font-size: 2em !important;
    }
#purpose .purpose1 {
    padding: 8vh 3vw 0vh 4vw !important;
    font-size: 1rem !important;
    margin-bottom: 10vh !important;       
    }
#purpose .purpose2 {
    padding: 0vh 3vw 0vh 4vw !important;
    font-size: 1rem !important;
    }
#purpose .purpose1 h3 {
    font-size: 1.3rem !important;
    }
#purpose .purpose2 h3 {
    font-size: 1.3rem !important;
    padding-top: 0vh !important;
    }
}
@media only screen and (max-width: 600px) {
    #purpose_title h2 {
        font-size: 2em !important;
    }
#purpose .purpose1 {
    padding: 6vh 3vw 0vh 4vw;
    font-size: 1rem !important;
    margin-bottom: 10vh !important;
    }
#purpose .purpose2 {
    padding: 4vh 3vw 0vh 4vw;
    font-size: 1rem !important;
    }
#purpose .purpose1 h3 {
    font-size: 1.3rem !important;
    }
#purpose .purpose2 h3 {
    font-size: 1.3rem !important;
    }
}
}

/*purpose section responsive landscape*/
@media only screen and (orientation: landscape) and (max-height: 500px){
#purpose .jumper3 { 
    display: none;
    }
#purpose_title h2 {
    font-size: 2.2em;
    padding-top: 3vh;
    }
#purpose {
    flex-direction: column;
    }
#purpose .purpose1 #diff {
    display: none !important;
    }
#purpose .purpose1 h3 {
    display: block;
    }
#purpose .purpose1 {
    padding: 6vh 3vw 0vh 4vw;
    font-size: 1.2rem;
    line-height: 2;
    height: 100%;
    border-bottom: 2px solid #7600A5;
    margin-bottom: 10vh;
    }
#purpose .purpose2 {
    padding: 4vh 3vw 0vh 4vw;
    font-size: 1.2rem;
    line-height: 2;
    height:100%;
    }
}
@media only screen and (orientation: landscape) and (max-width: 640px) {
#purpose .jumper3 { 
    display: none;
    }
#purpose_title h2 {
    font-size: 2em !important;
    padding-top: 2vh !important;
    }
#purpose .purpose1 {
    font-size: 1.1rem;
    line-height: 1.8;
    }
#purpose .purpose2 {
    font-size: 1.1rem;
    line-height: 1.8;
    padding: 0vh 3vw 0vh 4vw;
    }
}

/*purpose section responsive portrait*/
@media only screen and (max-width: 1005px) {
.purpose1 h3 {
    display: none;
    }
.purpose1 #diff {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.2em;
    letter-spacing: 1px;
    color: #7600A5;
    text-align: left;
    font-weight: 600;
    line-height: 1.5;
    padding-bottom: 6vh;
    display: block;
    }
.purpose .purpose1 { 
    margin: auto;
    padding: 15vh 3vw 0vh 3vw;
    font-size: 1.1rem;
    line-height: 2;
    }
.purpose .purpose2 { 
    margin: auto;
    padding: 15vh 3vw 0vh 3vw;
    font-size: 1.1rem;
    line-height: 2;   
    }
}
@media only screen and (max-width: 767px) { 
.purpose .jumper3 { 
    display: none;
    }
#purpose_title h2 {
    font-size: 2.2em;
    padding-top: 3vh;
    }
.purpose {
    flex-direction: column;
    }
.purpose .purpose1 h3 {
    font-size: 1.5rem;
    line-height: 2;
    margin: auto;
    padding-bottom: 2vh;
    display: block;
    }
.purpose .purpose1 #diff {
    display: none;
    }
.purpose .purpose1 {
    padding: 10vh 3vw 0vh 4vw;
    font-size: 1.3rem;
    line-height: 2;
    border-bottom: 2px solid #7600A5;
    height:100%;
    margin-bottom: 10vh;
    }
.purpose .purpose2 h3 {
    font-size: 1.5rem;
    line-height: 2;
    padding-bottom: 2vh;
    margin: auto;
    }
.purpose .purpose2 {
    padding: 0vh 3vw 0vh 4vw;
    font-size: 1.3rem;
    line-height: 2;
    height: 100%;
    }
}
@media only screen and (orientation: portrait) and (max-height: 640px){
#purpose_title h2 {
    font-size: 1.8em;
    padding-top: 1vh;
    }
#purpose .purpose1 {
    font-size: 1.2rem;
    line-height: 1.9; 
    padding: 0vh 3vw 0vh 4vw;
    }
#purpose .purpose1 h3 { 
    font-size: 1.4rem;
    line-height: 1.5;
    }
#purpose .purpose2 { 
    font-size: 1.2rem;
    line-height: 1.9;
    }
#purpose .purpose2 h3 {
    font-size: 1.4rem;
    line-height: 1.5;
    margin-top: -5vh;
    } 
}

/*Purpose section general styles*/
.purpose_title { 
    grid-area: purpose_title;
    max-width: 100%;
    height: 100%;
    margin: auto;
    width: 100%;
    position: relative;
    border-left: 2px solid #0019A8;
    border-right: 2px solid #7600A5;
    }
.purpose_title h2 {
    text-align: center;
    margin: auto;
    font-family: 'Open Sans', sans-serif;
    font-size: 3em;
    letter-spacing: 1.5px; 
    color: #000000;
    padding-top: 7vh;
    }
.purpose {
    grid-area: purpose;
    display: flex;
    max-width: 100%;
    position: relative;
    margin: auto;
    height: 100%;
    border-left: 2px solid #0019A8;
    border-right: 2px solid #7600A5;
    }
.purpose1 { /*make a difference*/
    flex-basis: 50%;
    text-align: justify;
    margin: auto;
    padding: 25vh 3vw 3vh 3vw;
    font-family: 'Open Sans', sans-serif;
    font-size: 1.1rem;
    line-height: 1.8;
    color: rgba(0, 0, 0, 0.75); 
    height: 100%;
    }
#diff {
	display: none;
    }
.purpose1 h3 {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.2em;
    letter-spacing: 1px;
    color: #7600A5;
    text-align: left;
    font-weight: 600;
    line-height: 1.5;
    padding-bottom: 6vh;
    }
.purpose2 { /*change*/
    flex-basis: 50%;
    text-align: justify;
    margin: auto;
    padding: 25vh 3vw 3vh 3vw;
    font-family: 'Open Sans', sans-serif;
    font-size: 1.1em;
    line-height: 1.8;
    color: rgba(0, 0, 0, 0.75);
    height: 100%;
    }
.purpose2 h3 {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.2em;
    letter-spacing: 1px; 
    color: #0019A8;
    text-align: right;
    font-weight: 600;
    line-height: 1.5;
    padding-bottom: 6vh;
    }
.jumper3 { /*positioning of container for the button to reconfigureigure section*/
    height: 40px;
    position: absolute;
    margin-top: 78.7vh;
    margin-left: 50%;
    }

 /*purpose page*/   
 .cont {
    grid-area: cont;
    display: flex;
    max-width: 100%;
    position: relative;
    height: 100%;
    /*display: grid;
    grid-template-rows: auto;
    grid-template-columns: (2, 1fr);
    grid-template-areas: 
    "cont cont";
    grid-auto-flow: row dense;
    margin-bottom: -8.83vh;*/
    }
.cont::after {
    content: "";
    background-image: url('../images/Particle inverse.jpg');
    opacity: 16%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1; 
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll;
    background-position: center;
    background-position-x: 64.75%;
    background-position-y: 55%;
    margin-top: -8.83vh;
    }
.cont .purpose1cont h3 {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.2em;
    letter-spacing: 1px;
    color: #7600A5;
    text-align: left;
    font-weight: 600;
    line-height: 1.5;
    padding-bottom: 6vh;
    }
.cont .purpose1cont {
    /*flex-basis: 50%;*/
    text-align: justify;
    padding: 1.5vh 3vw 015vh 4vw;
    font-family: 'Open Sans', sans-serif;
    font-size: 1.3vw;
    line-height: 1.6;
    color: rgba(0, 0, 0, 0.75); 
    margin-top: -8.83vh;
    }
.cont .purpose2cont h3 {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.2em;
    letter-spacing: 1px; 
    color: #0019A8;
    text-align: right;
    font-weight: 600;
    line-height: 1.5;
    padding-bottom: 6vh;
    }
.cont .purpose2cont {
    /*flex-basis: 50%;*/
    text-align: justify;
    padding: 1.5vh 4vw 3vh 3vw;
    font-family: 'Open Sans', sans-serif;
    font-size: 1.3vw;
    line-height: 1.6;
    color: rgba(0, 0, 0, 0.75);
    margin-top: -8.83vh;
    }
/*reconfigure section*/

/*reconfigure styles for firefox mobile*/
@supports (-moz-appearance:none) {
@media only screen and (orientation: landscape) and (max-height: 500px) {
#reconfigure h2 {
    font-size: 1.2em !important;
    line-height: 1 !important;
    padding: 0vh 13vw 0vh 17vw !important;
    }
#reconfigure p {
    font-size: 1em !important;
    line-height: 1.3 !important;
    padding: 1vh 17vw 10vh 17vw !important;
    margin-top: -7vh !important;
    }
#reconfigure .imglink { 
    bottom: 12% !important;   
    }
}
@media only screen and (max-width: 600px) {
#reconfigure h2 {
    font-size: 1.13em !important;
    line-height: 1.5 !important;
    padding: 2vh 13vw 2vh 17vw !important;
    }
#reconfigure p {
    font-size: 1em !important;
    line-height: 2 !important;
    padding: 1vh 17vw 0vh 17vw !important;
    margin-top: -8vh !important;
    }
#reconfigure .imglink { 
    bottom: 9% !important;   
    }
}
}

/*reconfigure styles responsive portrait*/
@media only screen and (max-width: 970px) {
#reconfigure {
    background-size: contain;
    }
}
@media only screen and (max-width: 810px) {
#reconfigure h2 {
    padding: 6vh 13vw 0vh 17vw;
    } 
#reconfigure p {
    font-size: 1.3em;
    line-height: 2.3;
    padding: 0vh 17vw 15vh 17vw;
    } 
}
@media only screen and (max-width: 767px) { 
#reconfigure h2 {
    font-size: 2em;
    line-height: 2.5;
    padding: 8vh 13vw 0vh 17vw;
    }
}
@media only screen and (orientation: portrait) and (max-height: 640px) {
#reconfigure {
    margin-bottom: -17% !important;
    }
#reconfigure h2 {
    font-size: 1.2em !important;
    }
    #reconfigure p {
    font-size: 1.1em !important;
    } 
}

/*reconfigure styles responsive landscape*/
@media only screen and (orientation: landscape) and (max-width: 767px) {
#reconfigure {
    background-size: contain;
    margin-bottom: -7.5% !important;
     }
#reconfigure h2 {
    font-size: 1.6em;
    line-height: 1;
    padding: 0vh 13vw 0vh 17vw;
    }
#reconfigure p {
    font-size: 1.3em;
    line-height: 2;
    padding: 0vh 17vw 10vh 17vw;
    margin-top: -6vh;
    }
#reconfigure .imglink { 
    position: relative;
    width: 66%;
    bottom: 15%;
    left: 17%;    
    }
}
@media only screen and (orientation: landscape) and (max-width: 640px) {
#reconfigure {
    background-size: contain;
    margin-bottom: -9.3% !important;
    }
#reconfigure h2 {
    font-size: 1.2em !important;
    line-height: 1 !important;
    padding: 0vh 13vw 0vh 17vw;
    margin-top: -10vh !important;
    }
#reconfigure p {
    font-size: 1.1em !important;
    line-height: 1.3 !important;
    padding: 0vh 17vw 5vh 17vw !important;
    margin-top: -7vh !important;
    }
#reconfigure .imglink { 
    position: relative;
    width: 66%;
    bottom: 15%;
    left: 17%;    
    }
}
@media only screen and (orientation: landscape) and (max-height: 500px) {
#reconfigure {
    background-size: contain;
    margin-bottom: -6.2%
    }
#reconfigure h2 {
    font-size: 1.3em;
    line-height: 1;
    padding: 0vh 13vw 0vh 17vw;
    }
#reconfigure p {
    font-size: 1em;
    line-height: 1.5;
    padding: 0vh 17vw 10vh 17vw;
    margin-top: -6vh;
    }
#reconfigure .imglink { 
    bottom: 15%;   
    }
}

/*reconfigure styles responsive portrait*/
@media only screen and (max-width: 630px) {
#reconfigure h2 {
    font-size: 1.8em;
    }
#reconfigure p {
    font-size: 1.3em;
    }
}
@media only screen and (max-width: 600px) {
#reconfigure h2 {
    font-size: 1.6em;
    line-height: 2.5;
    padding: 8vh 13vw 0vh 17vw;
    }
#reconfigure p {
    font-size: 1.2em;
    line-height: 2;
    padding: 0vh 17vw 13vh 17vw;
    }
}
@media only screen and (max-width: 465px) {
#reconfigure h2 {
    font-size: 1.3em;
    line-height: 1.5;
    padding: 4vh 13vw 0vh 17vw;
    }
#reconfigure p {
    font-size: 1.2em;
    line-height: 1.8;
    padding: 0vh 17vw 10vh 17vw;
    }
}

/*reconfigure section general styles*/
.reconfigure {
    display: flex;
    flex-direction: column;
    grid-area: reconfigure;
    max-width: 100%;
    height: auto;
    background-image: linear-gradient(240deg, rgba(180,0,252,0.8), rgba(0,38,255,0.8)), url('../images/robot.jpg');
    background-repeat: repeat;
    background-size: cover;
    background-attachment: scroll;
    margin-bottom: -8.83vh;
    justify-content: space-around;
    position: relative;
    }
.reconfigure h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 2.4em;
    font-weight: 500;
    line-height: 2.5;
    color: rgba(255, 255, 255, 0.95);
    padding: 2vh 0vw 0vh 17vw;  
    }
.reconfigure p {
    font-family: 'Lora', serif;
    font-size: 1.3em;
    line-height: 2;
    color: rgba(255, 255, 255, 0.85);
    padding: 0vh 17vw 20vh 17vw;
    text-align: justify;
    }
.reconfigure .imglink { 
    position: relative;
    width: 66%;
    bottom: 15%;
    left: 17%;    
    }
.reconfigure .overlay {
    /*height: 260px;*/
    background-color: #0019a800;
    transition: .5s ease;
    color: #0019A8;
    box-shadow: 0 3px 5px 0 rgba(0,0,0,0.2), 0 3px 5px 0 rgba(0,0,0,0.6);
    }
.reconfigure .overlay img { 
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    }
.reconfigure .overlay .text {
    position: absolute;
    font-family: 'Poppins', sans-serif;
    font-size: 3vw;
    top: 70%;
    left: 13%;
    text-align: left;
    }
.reconfigure .overlay:hover {
    background-color: #0019a80c;
    color: #7600A5;
    box-shadow: 0 8px 10px 0 rgba(0,0,0,0.6), 0 6px 10px 0 rgba(0,0,0,0.2);
    }
.reconfigure .overlay:active {
    background-color: #0019a800;
    color: #0019A8;
    box-shadow: 0 3px 5px 0 rgba(0,0,0,0.2), 0 3px 5px 0 rgba(0,0,0,0.6);
    }

/*footer section*/
/*footer responsive to top button instead of menu*/
@media only screen and (max-width: 800px) {  
footer .menu, .pagefooter .menu {
    display: none;
}
footer #top-button, .pagefooter #top-button {
    display: block;
    color: rgba(255, 255, 255, 0.90);
    font-family: 'Poppins', sans-serif;
    text-align: right;
    font-size: 1.6em;
    letter-spacing: 0.2em;
    padding: 0.3em 20px 0.1em 20px;
    text-decoration: none;
    z-index: 1;
    float: right;
    }
#top-button:hover {
    color: #0026FF;
    }
#top-button:active {
    color: #7600A5;
    }
}

/*footer general styles with menu*/
footer {
    grid-area: footer;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 3; 
    height: fit-content;
    height: -moz-fit-content;
    height: -ms-fit-content;
    height: -o-fit-content;
    height: -webkit-fit-content;
    margin-top: auto;
    position: static;
    width:100%;
    }
#top-button {
    display: none;
    }
.pagefooter { /*footer for pages*/
    background-color: #1c2138;
    z-index: 2; 
    }