@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');

/*========================= Body HTML =========================*/

html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: #000000;
overflow-y: hidden;
}

/*========================= Background =========================*/
.bg {
  background-image: url("https://www.johnmendizabal.com/images/website-photo-background-john.png");
  height: 100%;
  background-position: center; /* Adjust the position */
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

/*========================= Newsletter =========================*/
.newsletter {
  position: absolute;
  background-color: #000000;
  opacity: 0.8;
  z-index: 6000;
  padding-bottom: 32px;
  padding-top: 5px;
  padding-right: 5px;  
  margin-top: 9%;
  margin-right: 32px;
  width: 350px;
  border-radius: 12px; 
  border: 2px solid #e53935;
  
}

.newsletter-title {
  font-family: "Asap Condensed", sans-serif;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  color: #e53935;
  font-size: 1.5em;
  line-height: 1.5em;
  list-style-type: none;
}

.newsletter-text {
  font-family: "Asap Condensed", sans-serif;
  font-weight: 200;
  font-style: normal;
  color: #ffffff;  
  font-size: 1em;
  line-height: 1em;
  list-style-type: none;  
}

.button-submit {
  left: 0;
  float: left;
  bottom: 0;
  background-color: #e53935; /* Red */
  border: none;
  border-radius: 8px;
  color: #fff;
  padding: 12px;
  text-align: center;
  text-decoration: none;
  display: flex ;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  list-style-type: none;
}

.button-submit:hover {
  background-color: #ffffff;
  color: #000000;
}

.form-submit {
  bottom: 0;
  left: 0;
  float: left;
  background-color: #2a2a2a; /* Gray */
  border: none;
  border-radius: 8px;
  color: #ffffff;
  padding: 14px;
  margin: 0;
  width: 78%;
  text-align: left;
  text-decoration: none;
  display: flex ;
  font-size: 16px;
  transition-duration: 0.4s;
  cursor: text;
  list-style-type: none;
  border: 2px solid #6f6f6f  
}

.form-submit:hover {
  background-color: #000000;
  color: #ffffff;
}

/*========================= Logo =========================*/
.logo {
  position: fixed;
  float: left;
  top: 0;
  left: 0;
  margin: 0;
  width: 100%; 
  padding: 0;
  z-index: 1000; 
}

/*========================= Quotes =========================*/
.quotes-text {
   position: absolute;
}
.asap-condensed-extralight {
  font-family: "Asap Condensed", sans-serif;
  font-weight: 200;
  font-style: normal;
  color: #ffffff;
  text-shadow: 3px 3px 2px #000000;
}
.light {
  font-family: "Asap Condensed", sans-serif;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  color: #e53935;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9); /* 90% opacity */
}

/*========================= Menu =========================*/

.menu {
  position: fixed;
  float: right;
  display: flex;
  margin: 0;
  padding: 32px;
  right:0; 
  z-index: 4000;
}
.menu >div {
  text-align: center;
  margin-left: 70px;
}

.menu img:hover {
  transition: 0.5s;
  transform: scale(1.5);
}

.menu img {
  display: flex;
}

/*========================= Slide Bar =========================*/



/*========================= Footer=========================*/
.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: #000000;
   color: white;
   text-align: center;
   opacity: 1.0;
   font-family: 'Poppins', sans-serif;
   z-index: 2000;
}
.footer-font {
   padding-top: 2px;
   padding-bottom: 2px;
   font-size: 12px;
}

/*========================= Social Buttons =========================*/
.flex-container {
  display: flex;
  float: left;
  position: fixed;
  bottom: 0px;
  padding-bottom: 45px;
  padding-left: 30%; 
  padding-right: 30%;
  z-index: 3000;

}
.flex-container >div {
  text-align: center;
  margin-left: 30px;  
}

.flex-container img:hover {
  transition: 0.5s;
  transform: scale(1.5);
}

/*========================= Screen 2561 =========================*/  
@media (min-width: 2561px)
{
    
.newsletter {
  float: right;
  right: 0;
  width: 500px;
  margin-right: 38px; 
  margin-top: 15%;
  padding-left: 5px;
  padding-top: 8px;
  padding-right: 10px;  
  padding-bottom: 20px;  
}

.newsletter-title {
  font-size: 2.5em;
  line-height: 1.3em;
}

.newsletter-text {
  font-size: 1.5em;
  line-height: 1.5em;
}

.button-submit {
  padding: 12px;
  font-size: 18px;
  margin: 16px 2px;
}

.form-submit {
  width: 87%;
  font-size: 18px; 
  padding: 10px;
}

.quotes-text {
   float: left;    
   left: 0;
   text-align: left;   
   width: 20%;
   margin-left: 32px;
   margin-top: 15%;
}

.asap-condensed-extralight {
  font-size: 1.5em;
  line-height: 1.5em;
  margin-left: 15px;
  margin-right:15px;
  margin-top: 14px;
}

.light {
  font-size: 2.5em;
  line-height: 1.3em;
  margin-left: 14px;
}

.logo-john {
  width: 20%; 
  padding: 32px;
}
    
.menu img {
  width: 70px;
}

.menu >div {
  margin-left: 20px;
}

}

/*========================= Screen 3840 X 2160 =========================*/  
@media (min-width: 3840px)

{
 
.newsletter {
  float: right;
  right: 0;
  width: 750px;
  margin-right: 62px; 
  margin-top: 15%;
  padding-left: 32px;
  padding-top: 10px;
  padding-right: 42px;  
  padding-bottom: 42px;  
}

.newsletter-title {
  font-size: 4.7em;
  line-height: 1.3em;
}

.newsletter-text {
  font-size: 2.5em;
  line-height: 1.5em;
}

.button-submit {
  padding: 16px;
  font-size: 32px;
  margin: 16px 2px;
}

.form-submit {
  width: 85%;
  font-size: 32px; 
  padding: 10px;
}
    
.quotes-text {
   float: left;    
   left: 0;
   text-align: left;   
   width: 20%;
   margin-left: 32px;
   margin-top: 15%;
}

.asap-condensed-extralight {
  font-size: 2.5em;
  line-height: 1.5em;
  margin-left: 15px;
  margin-right:15px;
  margin-top: 14px;
}

.light {
  font-size: 4.7em;
  line-height: 1.3em;
  margin-left: 14px;
}

.logo-john {
  width: 20%; 
  padding: 32px;
}

.menu {
  padding: 56px;
}

.menu >div {
  margin-left: 40px;
}

.menu img {
  width: 100px;
}

.footer-font {
   padding-top: 20px;
   padding-bottom: 20px;
   font-size: 32px;
}

.flex-container {
  padding-left: 25%; 
  padding-right: 25%;
  padding-bottom: 170px;
}

.flex-container>div {
  margin-left: 60px;  
}

}

/*========================= Screen 2560=========================*/  

@media (max-width: 2560px)
{

.newsletter {
  float: right;
  right: 0;
  width: 450px;
  margin-right: 36px; 
  margin-top: 12%;
  padding-left: 8px;
  padding-top: 10px;
  padding-right: 5px;  
  padding-bottom: 26px;  
}

.newsletter-title {
  font-size: 3em;
  line-height: 1.3em;
}

.newsletter-text {
  font-size: 1.5em;
  line-height: 1.5em;
}

.button-submit {
  padding: 12px;
  font-size: 18px;
  margin: 16px 2px;
}

.form-submit {
  width: 85%;
  font-size: 18px; 
  padding: 10px;
}
   
.quotes-text {
   float: left;    
   left: 0;
   text-align: left;   
   width: 23%;
   margin-left: 16px;
   margin-top: 12%;
}

.asap-condensed-extralight {
  font-size: 1.5em;
  line-height: 1.5em;
  margin-left: 15px;
  margin-right:15px;
  margin-top: 14px;
}

.light {
  font-size: 3em;
  line-height: 1.3em;
  margin-left: 10px;
}

.logo-john {
  width: 15%; 
  padding: 24px;
}

.menu {
  padding: 32px;
}

.menu img {
  width: 50px;
}

.menu >div {
  margin-left: 20px;
}

}

/*========================= Screen 1920 X 1080 =========================*/ 
@media (max-width: 1920px)
{
    
.newsletter {
  float: right;
  right: 0;
  width: 380px;
  margin-right: 36px; 
  margin-top: 15%;
  padding-left: 8px;
  padding-top: 10px;
  padding-right: 5px;  
  padding-bottom: 26px;  
}

.newsletter-title {
  font-size: 2.5em;
  line-height: 1.3em;
}

.newsletter-text {
  font-size: 1.5em;
  line-height: 1.5em;
  padding-right: 12px;
  
}

.button-submit {
  padding: 12px;
  font-size: 18px;
  margin: 16px 2px;
}

.form-submit {
  width: 81%;
  font-size: 18px; 
  padding: 10px;
}
    
.quotes-text {
   float: left;    
   left: 0;
   text-align: left;   
   width: 22%;
   margin-left: 15px;
   margin-top: 14%;
}

.asap-condensed-extralight {
  font-size: 1.5em;
  line-height: 1.5em;
  margin-left: 15px;
  margin-right:15px;
  margin-top: 14px;
}

.light {
  font-size: 2.5em;
  line-height: 1.3em;
  margin-left: 14px;
}

.logo-john {
  width: 18%; 
  padding: 20px;
}

.menu >div {
  margin-left: 20px;
}

.menu img {
  width: 50px;
}

.flex-container {
  padding-left: 20%; 
  padding-right: 20%;
}

.flex-container>div {
  margin-left: 40px;  
}

}

/*========================= Screen 1368 X 1024 =========================*/  

@media (max-width: 1368px)
{
    
.newsletter {
  float: right;
  right: 0;
  width: 240px;
  margin-right: 26px; 
  margin-top: 15%;
  padding-left: 0;
  padding-top: 3px;
  padding-right: 5px;  
  padding-bottom: 18px;  
}

.newsletter-title {
  font-size: 2em;
  line-height: 1.3em;
}

.newsletter-text {
  font-size: 1.2em;
  line-height: 1.3em;
  padding-right: 18px;
}

.button-submit {
  padding: 8px;
  font-size: 16px;
  margin: 16px 2px;
}

.form-submit {
  width: 75%;
  font-size: 14px; 
  padding: 7px;
}

.quotes-text {
   float: left;    
   left: 0;
   text-align: left;   
   width: 25%;
   margin-left: 14px;
   margin-top: 15%;
}

.asap-condensed-extralight {
  font-size: 1.2em;
  line-height: 1.3em;
  margin-left: 15px;
  margin-right:24px;
  margin-top: 14px;
}

.light {
  font-size: 2em;
  line-height: 1.3em;
  margin-left: 14px;
}
  
.logo-john {
  width: 20%; 
  padding: 0;
}

.logo {
  padding-top: 16px;
  padding-bottom: 12px;
  padding-left: 24px;

}

.menu img {
  width: 35px;
}

.menu >div {
  margin-left: 20px;
}

.flex-container {
  padding-left: 15%; 
  padding-right: 15%;
}

.flex-container>div {
  margin-left: 30px;  
}

.menu {
  padding: 24px;
}

}

/*========================= Screen 1340 =========================*/  

@media (max-width: 1340px)
{
    
.newsletter {
  float: right;
  right: 0;
  width: 260px;
  margin-right: 26px; 
  margin-top: 15%;
  padding-left: 0;
  padding-top: 3px;
  padding-right: 5px;  
  padding-bottom: 18px;  
}

.newsletter-title {
  font-size: 2em;
  line-height: 1.3em;
}

.newsletter-text {
  font-size: 1.2em;
  line-height: 1.3em;
  padding-right: 18px;
}

.button-submit {
  padding: 8px;
  font-size: 16px;
  margin: 16px 2px;
}

.form-submit {
  width: 75%;
  font-size: 18px; 
  padding: 10px;
}

.quotes-text {
   float: left;    
   left: 0;
   text-align: left;   
   width: 25%;
   margin-left: 14px;
   margin-top: 15%;
}

.asap-condensed-extralight {
  font-size: 1.2em;
  line-height: 1.3em;
  margin-left: 15px;
  margin-right:24px;
  margin-top: 14px;
}

.light {
  font-size: 2em;
  line-height: 1.3em;
  margin-left: 14px;
}
  
.logo-john {
  width: 20%; 
  padding: 0;
}

.logo {
  padding-top: 16px;
  padding-bottom: 12px;
  padding-left: 24px;

}

.menu img {
  width: 35px;
}

.flex-container {
  padding-left: 15%; 
  padding-right: 15%;
}

.flex-container>div {
  margin-left: 30px;  
}

.menu {
  padding: 24px;
}

.menu >div {
  margin-left: 20px;
}

}

/*========================= Screen 1280 X 800 =========================*/ 
@media (max-width: 1280px)
{
    
.newsletter {
  float: right;
  right: 0;
  width: 280px;
  margin-right: 26px; 
  margin-top: 15%;
  padding-left: 0;
  padding-top: 3px;
  padding-right: 5px;  
  padding-bottom: 24px;  
}

.newsletter-title {
  font-size: 1.5em;
  line-height: 1.3em;
}

.newsletter-text {
  font-size: 1em;
  line-height: 1.3em;
  padding-right: 20px;
  padding-bottom: 10px;
}

.button-submit {
  padding: 8px;
  font-size: 14px;
  margin: 8px 2px;
}

.form-submit {
  width: 75%;
  font-size: 18px; 
  padding: 9px;
}

.quotes-text {
   float: left;    
   left: 0;
   text-align: left;   
   width: 25%;
   margin-left: 14px;
   margin-top: 15%;
}

.asap-condensed-extralight {
  font-size: 1.2em;
  line-height: 1.3em;
  margin-left: 15px;
  margin-right:24px;
  margin-top: 14px;
}

.light {
  font-size: 2em;
  line-height: 1.3em;
  margin-left: 14px;
}

.menu >div {
  margin-left: 15px;
}

}

/*========================= Screen 914 =========================*/ 

@media (max-width: 914px)
{

.newsletter {
  float: left;
  left: 0;
  bottom: 0;
  margin-left: 32px;
  width: 93%;
  margin-bottom: 140px;
  padding-left: 0;
  padding-top: 6px;
  padding-right: 0;  
  padding-bottom: 32px;  
}

.newsletter-title {
  font-size: 1.5em;
  line-height: 1em;
}

.newsletter-text {
  font-size: 1.5em;
  line-height: 2em;
  padding-right: 18px;
  padding-bottom: 0;
}

.button-submit {
  padding: 11px;
  font-size: 18px;
  margin: 0 8px;
}

.form-submit {
  width: 77%;
  font-size: 18px; 
  padding: 9px;
}

.quotes-text {
   float: none;
   bottom: 330px;
   left: 0;
   width: 100%;
   text-align: center;
}

.asap-condensed-extralight {
  font-size: 1.5em;
  line-height: 1.5em;
  margin-left:70px;
  margin-right:70px
}

.light {
  font-size: 2em;
  line-height: 1.0em;
  margin-left: 50px;
  margin-right: 50px;   
}
    
.logo-john {
  width: 40%; 
  padding: 10;
}

.logo {
  padding-top: 16px;
  padding-bottom: 12px;
  padding-left: 24px;

}

.flex-container {
  padding-left: 3%; 
  padding-right: 3%;
}

.flex-container>div {
  margin-left: 15px;  
}

.menu img {
  width: 40px;
}

.menu {
  padding: 32px;
}

.menu >div {
  margin-left: 15px;
}

}

/*========================= Screen 840 =========================*/ 

@media (max-width: 840px)
{
    
.newsletter {
  float: left;
  left: 0;
  bottom: 0;
  margin-left: 32px;
  width: 92%;
  margin-bottom: 120px;
  padding-left: 0;
  padding-top: 6px;
  padding-right: 0;  
  padding-bottom: 32px;  
}

.newsletter-title {
  font-size: 1.5em;
  line-height: 1em;
}

.newsletter-text {
  font-size: 1em;
  line-height: 2em;
  padding-right: 18px;
}

.button-submit {
  padding: 11px;
  font-size: 20px;
  margin: 0 8px;
}

.form-submit {
  width: 73%;
  font-size: 20px; 
  padding: 10px;
  border-radius: 6px;
}

.quotes-text {
   float: none;
   bottom: 285px;
   left: 0;
   width: 100%;
   text-align: center;
   margin: 0;
   padding: 0;
}

.asap-condensed-extralight {
  font-size: 1.5em;
  line-height: 1.5em;
  margin-left:70px;
  margin-right:70px
}

.light {
  font-size: 2em;
  line-height: 1.0em;
  margin-left: 50px;
  margin-right: 50px;   
}
   
.logo-john {
  width: 30%; 
  padding: 0;
}

.logo {
  padding-top: 18px;
  padding-bottom: 16px;
  padding-left: 24px;

}

.flex-container {
  padding-left: 15%; 
  padding-right: 15%;
}

.flex-container>div {
  margin-left: 10px;  
}

.menu img {
  width: 30px;
}

.menu {
  padding: 24px;
}

.menu >div {
  margin-left: 15px;
}

}

/*========================= Screen 640 =========================*/ 

@media (max-width: 640px)
{

.newsletter {
  float: left;
  left: 0;
  bottom: 0;
  margin-left: 12px;
  width: 93.5%;
  margin-bottom: 110px;
  padding-left: 0;
  padding-top: 6px;
  padding-right: 2px;  
  padding-bottom: 26px;  
}

.newsletter-title {
  font-size: 1em;
  line-height: 1em;
}

.newsletter-text {
  font-size: 0.8em;
  line-height: 2em;
  padding-right: 18px;
}

.button-submit {
  padding: 8px;
  font-size: 14px;
  margin: 0 8px;
  border-radius: 4px;
}

.form-submit {
  width: 74%;
  font-size: 14px;
  margin: 0;
  padding: 7px;
  border-radius: 6px;
}

.quotes-text {
   float: none;
   bottom: 240px;
   left: 0;
   width: 100%;
   text-align: center;
}

.asap-condensed-extralight {
  font-size: 1.1em;
  line-height: 1.5em;
  margin-left: 24px;
  margin-right: 24px;
}

.light {
  font-size: 1.7em;
  line-height: 1.2em;
  margin-left: 50px;
  margin-right: 50px;   
}
   
.logo-john {
  width: 40%; 
}

.logo {
  padding-top: 18px;
  padding-bottom: 10px;
  padding-left: 24px;
}

.menu img {
  width: 28px;
}

.flex-container {
  padding-left: 4%; 
  padding-right: 4%;
}

.flex-container>div {
  margin-left: 0px;  
}

.menu {
  padding-right: 20px;
}

.menu >div {
  margin-left: 15px;
}

}

/*========================= Screen 540 =========================*/ 

@media (max-width: 540px)
{

.newsletter {
  float: left;
  left: 0;
  bottom: 0;
  margin-left: 12px;
  width: 93.5%;
  margin-bottom: 110px;
  padding-left: 0;
  padding-top: 0;
  padding-right: 2px;  
  padding-bottom: 22px;  
}

.newsletter-title {
  font-size: 1em;
  line-height: 1em;
}

.newsletter-text {
  font-size: 0.8em;
  line-height: 2em;
  padding-right: 18px;
}

.button-submit {
  padding: 8px;
  font-size: 14px;
  margin: 0 8px;
  border-radius: 4px;
}

.form-submit {
  width: 70%;
  font-size: 14px;
  margin: 0;
  padding: 7px;
  border-radius: 6px;
}

.quotes-text {
   float: none;
   bottom: 220px;
   left: 0;
   width: 100%;
   text-align: center;
}

.asap-condensed-extralight {
  font-size: 1em;
  line-height: 1.5em;
  margin-left: 20px;
  margin-right: 20px;
}

.light {
  font-size: 1.5em;
  line-height: 1.2em;
  margin-left: 50px;
  margin-right: 50px;   
}
   
.logo-john {
  width: 40%; 
}

.logo {
  padding-top: 18px;
  padding-bottom: 10px;
  padding-left: 24px;
}

.menu img {
  width: 28px;
}

.flex-container {
  padding-left: 15%; 
  padding-right: 15%;
}

.flex-container>div {
  margin-left: 5px;  
}

.menu {
  padding-right: 20px;
}

.menu >div {
  margin-left: 15px;
}

}

/*========================= Screen 430 x 932 =========================*/ 

@media (max-width: 430px)
{

.newsletter {
  float: left;
  left: 0;
  bottom: 0;
  margin-left: 11px;
  width: 92.5%;
  margin-bottom: 110px;
  padding-left: 0;
  padding-top: 5px;
  padding-right: 0;  
  padding-bottom: 22px;  
}

.newsletter-title {
  font-size: 0.9em;
  line-height: 1em;
}

.newsletter-text {
  font-size: 0.8em;
  line-height: 2em;
  padding-right: 14px;
  padding-left: 0;
}

.button-submit {
  padding: 8px;
  font-size: 14px;
  margin: 2px 8px;
  border-radius: 4px;
}

.form-submit {
  float: left;
  left: 0;
  width: 61%;
  font-size: 14px; 
  padding: 7px;
  margin-left: 0;
  border-radius: 4px;
}

.quotes-text {
   float: none;
   bottom: 240px;
   left: 0;
   width: 100%;
   text-align: center;
}

.asap-condensed-extralight {
  font-size: 1em;
  line-height: 1.2em;
  margin-left: 30px;
  margin-right: 30px;
  padding-top: 0;
}

.light {
  font-size: 1.9em;
  line-height: 1.1em;
  margin-left: 15px;
  margin-right: 15px;   
}
   
.menu img {
  width: 26px;
}

.logo-john {
  width: 40%; 
}

.logo {
  padding-top: 18px;
  padding-bottom: 10px;
  padding-left: 24px;
}

.flex-container {
  padding-left: 3%; 
  padding-right: 3%;
}
.flex-container>div {
  margin-left: 2px;  
}

.menu {
  padding-right: 16px;
  padding-top: 26px;
}

.menu >div {
  margin-left: 10px;
}

}

/*========================= Screen 414 x 896 =========================*/ 

@media (max-width: 414px)
{

.newsletter {
  float: left;
  left: 0;
  bottom: 0;
  margin-left: 11px;
  width: 92.5%;
  margin-bottom: 110px;
  padding-left: 0;
  padding-top: 5px;
  padding-right: 0;  
  padding-bottom: 22px;  
}

.newsletter-title {
  font-size: 0.9em;
  line-height: 1em;
}

.newsletter-text {
  font-size: 0.8em;
  line-height: 2em;
  padding-right: 14px;
  padding-left: 0;
}

.button-submit {
  padding: 7px;
  font-size: 16px;
  margin: 1px 8px;
  border-radius: 4px;
}

.form-submit {
  float: left;
  left: 0;
  width: 56%;
  font-size: 14px; 
  padding: 7px;
  margin-left: 0;
  border-radius: 4px;
}

.quotes-text {
   float: none;
   bottom: 235px;
   left: 0;
   width: 100%;
   text-align: center;
}

.asap-condensed-extralight {
  font-size: 1em;
  line-height: 1em;
  margin-left: 5px;
  margin-right: 5px;
}

.light {
  font-size: 1.5em;
  line-height: 1.2em;
  margin-left: 16px;
  margin-right: 16px;   
}
   
.menu img {
  width: 26px;
}

.logo-john {
  width: 40%; 
}

.logo {
  padding-top: 18px;
  padding-bottom: 10px;
  padding-left: 24px;
}

.flex-container {
  padding-left: 3%; 
  padding-right: 3%;
}
.flex-container>div {
  margin-left: 2px;  
}

.menu {
  padding-right: 16px;
  padding-top: 26px;
}

.menu >div {
  margin-left: 10px;
}

}

/*========================= Screen 412 x 915 =========================*/ 

@media (max-width: 412px)
{

.newsletter {
  float: left;
  left: 0;
  bottom: 0;
  margin-left: 11px;
  width: 92.5%;
  margin-bottom: 110px;
  padding-left: 0;
  padding-top: 5px;
  padding-right: 0;  
  padding-bottom: 22px;  
}

.newsletter-title {
  font-size: 0.9em;
  line-height: 1em;
}

.newsletter-text {
  font-size: 0.8em;
  line-height: 2em;
  padding-right: 14px;
  padding-left: 0;
}

.button-submit {
  padding: 8px;
  font-size: 14px;
  margin: 1px 8px;
  border-radius: 4px;
}

.form-submit {
  float: left;
  left: 0;
  width: 60%;
  font-size: 14px; 
  padding: 7px;
  margin-left: 0;
  border-radius: 4px;
}

.quotes-text {
   float: none;
   bottom: 240px;
   left: 0;
   width: 100%;
   text-align: center;
}

.asap-condensed-extralight {
  font-size: 1em;
  line-height: 1.2em;
  margin-left: 30px;
  margin-right: 30px;
  padding-top: 0;
}

.light {
  font-size: 1.5em;
  line-height: 1.1em;
  margin-left: 15px;
  margin-right: 15px;   
}
   
.menu img {
  width: 26px;
}

.logo-john {
  width: 40%; 
}

.logo {
  padding-top: 18px;
  padding-bottom: 10px;
  padding-left: 24px;
}

.flex-container {
  padding-left: 3%; 
  padding-right: 3%;
}
.flex-container>div {
  margin-left: 2px;  
}

.menu {
  padding-right: 16px;
  padding-top: 26px;
}

.menu >div {
  margin-left: 10px;
}

}

/*========================= Screen 375 x 667 =========================*/ 

@media (max-width: 375px)
{

.newsletter {
  float: left;
  left: 0;
  bottom: 0;
  margin-left: 11px;
  width: 92.5%;
  margin-bottom: 100px;
  padding-left: 0;
  padding-top: 5px;
  padding-right: 0;  
  padding-bottom: 22px;  
}

.newsletter-title {
  font-size: 0.9em;
  line-height: 1em;
}

.newsletter-text {
  font-size: 0.8em;
  line-height: 2em;
  padding-right: 14px;
  padding-left: 0;
}

.button-submit {
  padding: 6px;
  font-size: 14px;
  margin: 1px 8px;
  border-radius: 4px;
}

.form-submit {
  float: left;
  left: 0;
  width: 62%;
  font-size: 12px; 
  padding: 6px;
  margin-left: 0;
}

.quotes-text {
   float: none;
   bottom: 220px;
   left: 0;
   width: 100%;
   text-align: center;
}

.asap-condensed-extralight {
  font-size: 1em;
  line-height: 1em;
  margin-left: 5px;
  margin-right: 5px;
}

.light {
  font-size: 1.2em;
  line-height: 1em;
  margin-left: 5px;
  margin-right: 5px;   
}
   
.menu img {
  width: 22px;
}

.logo-john {
  width: 40%; 
}

.logo {
  padding-top: 18px;
  padding-bottom: 10px;
  padding-left: 24px;
}

.flex-container {
  padding-left: 3%; 
  padding-right: 3%;
}
.flex-container>div {
  margin-left: 2px;  
}

.menu {
  padding-right: 16px;
  padding-top: 26px;
}

.menu >div {
  margin-left: 10px;
}

}

/*========================= Screen 360 =========================*/ 

@media (max-width: 360px)
{

.newsletter {
  float: left;
  left: 0;
  bottom: 0;
  margin-left: 11px;
  width: 93%;
  margin-bottom: 95px;
  padding-left: 0;
  padding-top: 5px;
  padding-right: 0;  
  padding-bottom: 22px;  
}

.newsletter-title {
  font-size: 0.9em;
  line-height: 1em;
}

.newsletter-text {
  font-size: 0.9em;
  line-height: 2em;
  padding-right: 14px;
  padding-left: 0;
}

.button-submit {
  padding: 6px;
  font-size: 14px;
  margin: 1px 8px;
  border-radius: 4px;
}

.form-submit {
  float: left;
  left: 0;
  width: 56%;
  font-size: 12px; 
  padding: 6px;
  margin-left: 0;
}

.quotes-text {
   float: none;
   bottom: 215px;
   left: 0;
   width: 100%;
   text-align: center;
}

.asap-condensed-extralight {
  font-size: 1em;
  line-height: 1em;
  margin-left: 5px;
  margin-right: 5px;
}

.light {
  font-size: 1.2em;
  line-height: 1.2em;
  margin-left: 5px;
  margin-right: 5px;   
}
   
.menu img {
  width: 22px;
}

.logo-john {
  width: 40%; 
}

.logo {
  padding-top: 18px;
  padding-bottom: 10px;
  padding-left: 24px;
}

.flex-container {
  padding-left: 3%; 
  padding-right: 3%;
}
.flex-container>div {
  margin-left: 2px;  
}

.menu {
  padding-right: 16px;
  padding-top: 26px;
}

.menu >div {
  margin-left: 10px;
}

}