@media  only screen  and (max-width: 767px) and (orientation: portrait){
/*declare large nav bar not in use */
a{
color: white;
padding: 1rem;
}

body{
font-family: 'Roboto';
max-width: 100%;
width: 100vw;
background-color: rgb(240, 239, 239);
color: rgb(44,44,44);
margin: 0;
padding: 0;
box-sizing: border-box;
}

#imgdiv{
width: 100%;
height: 60vh;
background-color: rgb(26, 21, 99);
color: white;
font-family: 'Titillium Web', sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
display: flex;
justify-content: center;
align-items: center;
}

#imgdiv i{
    font-size: 2rem;
    padding: 0 10%;
    text-align: center;

}

#thetext{
margin: 5rem 0;
}

#thetext p{
margin-left: 15%;
margin-right: 15%;
font-size: 1rem;
line-height: 1.2rem;
}

h2{
text-align: center;
color: rgb(44,44,44);

}


p{
    color: rgb(44,44,44);
    font-weight: 600;

}

}

/* ) #######################################################################################
############################################################################################
################################################################################################
################################################################################################*/

@media  only screen  and (max-width: 767px) and (orientation: landscape){

a{
color: white;
padding: 1rem;
}

body{
font-family: 'Roboto';
max-width: 100%;
width: 100vw;
background-color: rgb(240, 239, 239);
color: white;
margin: 0;
padding: 0;
box-sizing: border-box;
}

#imgdiv{
width: 100%;
height: 80vh;
background-color: rgb(26, 21, 99);
color: white;
font-family: 'Titillium Web', sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
display: flex;
justify-content: center;
align-items: center;
}

#imgdiv i{
    font-size: 2rem;
    padding: 0 10%;
    text-align: center;

}



#thetext{
margin: 5rem 0;
}

#thetext p{
margin-left: 15%;
margin-right: 15%;
font-size: 1rem;
line-height: 1.2rem;
}

h2{
text-align: center;
color: rgb(44,44,44);

}


p{
    color: rgb(44,44,44);
    font-weight: 600;

}

}

/* ) #######################################################################################
############################################################################################
################################################################################################
################################################################################################*/

@media  only screen  and (min-width: 768px) and (max-width: 1298px) and (orientation: portrait){
a{
color: white;
padding: 1rem;
}

body{
font-family: 'Roboto';
max-width: 100%;
width: 100vw;
background-color: rgb(240, 239, 239);
color: white;
margin: 0;
padding: 0;
box-sizing: border-box;
}

#imgdiv{
width: 100%;
height: 50vh;
background-color: rgb(26, 21, 99);
color: white;
font-family: 'Titillium Web', sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
display: flex;
justify-content: center;
align-items: center;
font-size: 3rem;
}


#thetext{
margin: 5rem 0;
}

#thetext p{
margin: 0 15%;
font-size: 1.2rem;
line-height: 1.4rem;
}

h2{
text-align: center;
color: rgb(44,44,44);

}

p{
    color: rgb(44,44,44);
    font-weight: 600;
  
}

}
/* ) #######################################################################################
############################################################################################
################################################################################################
################################################################################################*/
@media  only screen  and (min-width: 768px) and (max-width: 1298px) and (orientation: landscape){
a{
color: white;
padding: 1rem;
}

body{
font-family: 'Roboto';
max-width: 100%;
width: 100vw;
background-color: rgb(240, 239, 239);
color: white;
margin: 0;
padding: 0;
box-sizing: border-box;
}

#imgdiv{
width: 100%;
height: 60vh;
background-color: rgb(26, 21, 99);
color: white;
font-family: 'Titillium Web', sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
display: flex;
justify-content: center;
align-items: center;
font-size: 3rem;
}


#thetext{
margin: 5rem 0;
}

#thetext p{
margin: 0 15%;
font-size: 1.2rem;
line-height: 1.4rem;
}

h2{
text-align: center;
color: rgb(44,44,44);

}

p{
    color: rgb(44,44,44);
    font-weight: 600;

}

}

/* ) #######################################################################################
############################################################################################
################################################################################################
################################################################################################*/
@media  only screen  and (min-width: 1299px) and (max-width: 2299px){
a{
color: white;
padding: 1rem 1.5rem 1rem 1rem;
}

body{
font-family: 'Roboto';
max-width: 100%;
width: 100vw;
background-color: rgb(240, 239, 239);
color: white;
margin: 0;
padding: 0;
box-sizing: border-box;
}

#imgdiv{
width: 100%;
height: 70vh;
background-color: rgb(46, 38, 161);
color: white;
font-family: 'Titillium Web', sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
display: flex;
justify-content: center;
align-items: center;
font-size: 4rem;
}


#thetext{

margin: 5rem 0;
}

#thetext p{
margin: 0 15%;
font-size: 1.4rem;
line-height: 1.8rem;

}

h2{
text-align: center;
color: rgb(44,44,44);

}

p{
    color: rgb(44,44,44);
    font-weight: 600;

}


}
/* ) #######################################################################################
############################################################################################
################################################################################################
################################################################################################*/
@media  only screen  and (min-width: 2300px){
a{
color: white;
padding: 1rem 1.5rem 1rem 1rem;
}

body{
font-family: 'Roboto';
max-width: 100%;
width: 100vw;
background-color: rgb(240, 239, 239);
color: rgb(44,44,44);
font-weight: 600;
margin: 0;
padding: 0;
box-sizing: border-box;
}

#imgdiv{
width: 100%;
height: 50vh;
background-color: rgb(26, 21, 99);
color: white;
font-family: 'Titillium Web', sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
display: flex;
justify-content: center;
align-items: center;
font-size: 4rem;
}


#thetext{
    margin: 5rem 0;
}

#thetext p{
margin: 0 15%;
font-size: 1.6rem;
line-height: 1.8rem;

}

h4{
text-align: center;
color: rgb(44,44,44);
}

p{
    color: rgb(44,44,44);
    font-weight: 600;

}

}