/*First SASS page*/
body 
{font-size:100%;
margin: 0;
background-color:white;

}

/*text formatting
h1 
{font-size:6.44em;
    font-family: "abril-fatface,serif";
    font-weight: 400;
    font-style: normal;
    color: blue;
    padding-left: 20px;
  
}
h2 
    { 
    font-size:10.4em;
    font-family: "abril-fatface,serif";
    font-weight: 600;
    font-style: normal;
    color:blue;
    background-color:rgb(138, 161, 120, .7);
    }
h3 
    {
    font-size: 1.84em;
    font-family:"myriad pro,serif";
    color:white;
    padding-left: 20px;
    padding-top: 20px;
    }

h4
    { font-size:3.4em;
    font-family: "abril-fatface,serif";
    font-weight: 600;
    font-style: normal;
    color:#C55F2B;
    }

h5
{font-size: 2.51em;
    font-family:"abril fatface,serif";
    color:rgb(221, 118, 0);}

h6
{font-size: 1.67em;
    font-family:"myriad pro,serif";
    color:black;}

p
{
    font-size: 1.55em;
    font-family:"myriad pro,serif";
    color:black;
}
*/ 

/* 
- - -
External style sheets in use:
- - -
- base.css
https://codepen.io/gymnasium/pen/eYpRxKE
- flex-type.css
https://codepen.io/gymnasium/pen/LYpzVqr
- focus.css
https://codepen.io/gymnasium/pen/GRpMJzL
- viewport.css
https://codepen.io/gymnasium/pen/LYpzVar
- - -
*/


.has-dropcap:first-letter {
    font-family: "myriad pro,serif";
    float: left;
    font-size: 4rem;
    line-height: 0.65;
    margin: 0.1em 0.1em 0.2em 0;
  }
  .dropcap {
    font-family: "myriad pro,serif";
    background: #303030;
    color: #FDF9F2;
    float: left;
    font-size: 2em;
    line-height: .5;
    margin: 0.1em 0.1em 0.2em 0;
    padding: 0.1em;
  }
  .dropcap:before,
  .dropcap:after {
    content: "";
    display: block;
  }
  .dropcap:before {
    margin-top: -0.2em;
  }
  .dropcap:after {
    margin-bottom: -0.15em;
  }
  /* https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html */
  .sr-only:not(:focus):not(:active) {
    clip: rect(0 0 0 0); 
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap; 
    width: 1px;
  }


header
{
  width:100%;
  /* height:650px;  */
  height: auto;
  /* padding-bottom: 50px; */
  background-image: url(images/bcgrd.png);
  background-repeat:no-repeat;
    background-size:cover; 

}

.wrapper {
    height: 100%;
    /*This part is important for centering*/
    display: flex;
    align-items: left;
    justify-content: left;
    
  }
  
  .gif
  {width:40%;
    height:100%;
    margin:auto;}


  .gifimage
  {
 
    width:800px;
    height:100%;
    background-image:url(images/giffy.png);
    background-repeat:no-repeat;
    background-size:cover; 


}


  .typing-demo {
    width: 100%;
    animation: typing 2s steps(22), blink .5s step-end infinite alternate;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid;
    font-family: monospace;
    font-size: 1.4em;
  }
  @keyframes typing {
    from {
      width: 0
    }
  }
  @keyframes blink {
    50% {
      border-color: transparent
    }
  }

.title
{  height:700px;
   padding-left:50px;
   padding-top:150px;
   width:100%;
   box-sizing:border-box;
   margin:auto;
flex-wrap: wrap;
display:flex;
flex-direction:row;

   
}

h1 
{font-size:2.6em;
    font-family: "abril-fatface,serif";
    font-weight: 400;
    font-style: normal;
    color: white;
    padding-left: 20px;
    padding-top:15px;
    padding-bottom:15px;
}
h2 
    { font-size:6.4em;
    font-family: "abril-fatface,serif";
    font-weight: 600;
    font-style: normal;
    color:white;
    background-color:rgb(138, 161, 120, .7); 
    }

    p
    {font-size: 1em;
    line-height:2em;}

    .caption
    {width:100%;}
/*******************************************/
.main
    {
        width:1500px;
        display:flex;
        flex-wrap:wrap;
        flex-direction:column;
        justify-content:space-around;
        background-color:white;
        
    }
.brief
    { 
        width:75%;
        text-align:center;
        margin:auto;
        padding-top:100px;
        margin-bottom:30px;
        font-size:1.5em;
        line-height:1em;
    }

.sect1header
    {
      max-width:1100px; /*make 100% in mobile*/
      margin:auto;
      background-color:rgb(252, 201, 121, .7); 
      text-align:center;
      padding:20px;
      margin-bottom:30px;
    
      animation:fadeInDown;
      animation-duration:2s;
    }
   
h4
    {font-size:3em;
    font-family: "abril-fatface,serif";
    font-weight: 600;
    font-style: normal;
    color:#C55F2B;
   
    }

    /*Using Customers as Billboards*/
.section1
    {
        max-width:1300px;
        height:700px;
        margin:auto;
        background-color:white;
        display:flex;
        flex-direction:row;
        justify-content:space-around;
        
        
    }

    .left1
    {
        width:60%;
        height:90%;
        margin-left:150px;
        background-image:url(images/sect1.png);
        background-repeat:no-repeat;
        background-size:contain;

    }

    .right1
    {
        width:40%;
        background-color:white;
        margin-right:100px;
        line-height: 1.7em;
        margin-top:50px;
    }

/*Cotton Growth and Production*/
.sect2header
    {
    height:100%;
      max-width:1100px; /*make 100% in mobile*/
      margin:auto;
      background-color:rgb(252, 201, 121, .7); 
      text-align:center;
      padding:20px;
      margin-top:20px;
      margin-bottom:20px;

      animation:fadeInDown;
      animation-duration:2s;
    }
.section2
    {
        max-width:1300px;
        height:950px;
        margin:auto;
        background-color:white;
        display:flex;
        flex-direction:row;
        justify-content:space-between;
       
    }

    .left2
    {
        width:40%;
        margin-left:100px;
        line-height: 2em;
        margin-top:100px;
        box-sizing: border-box;

    }

    .right2
    {
        width:60%;
        height:90%;
        margin-top:50px;
        background-image:url(images/cotton.png);
        background-repeat:no-repeat;
        background-size:contain;
        margin-left:50px;
    }

    


/*where does cotton come from*/
.sect4header
{
height:100%;
  max-width:1100px; /*make 100% in mobile*/
  margin:auto;
  background-color:rgb(252, 201, 121, .7); 
  text-align:center;
  padding:20px;
  margin-top:50px;

  animation:fadeInDown;
      animation-duration:2s;
}
    .section4
    {
        width:67%;
        margin:auto;
        background-color:white;
        display:flex;
        flex-direction:row;
        justify-content:space-between;
        align-items:left;
        margin-top:20px;
    }

    .right4
    {
        width:85%;
        background-color:white;
        margin-left:100px;
        line-height: 2em;
        margin-bottom:75px;
        text-align:center;
    }  


/*table*/
  .section6 
  { max-width:1300px;
    margin:auto;
    margin-top:50px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
  }
.sect6header
{
    height:100%;
    max-width:1100px; /*make 100% in mobile*/
    margin:auto;
    background-color:rgb(252, 201, 121, .7); 
    text-align:center;
    padding:20px;
    

    animation:fadeInDown;
      animation-duration:2s;

}
    .sect6image{
        height:500px;
        width:100%;
        margin:auto;
        background-image:url(images/table.png);
        background-repeat:no-repeat;
        background-position:center;
    }
   


/*video*/
.section7
{
   width:1000px; 
   height:500px;
   display:flex;
   flex-wrap:wrap;
   flex-direction:row;
   justify-content:space-around;
  margin:auto;
  text-align:center;
  margin-top:30px;
}
iframe
{width:900px;
height:500px;
}

/*tax on the environment*/
.sect8header
    {
      max-width:1100px; /*make 100% in mobile*/
      margin:auto;
      background-color:rgb(252, 201, 121, .7); 
      text-align:center;
      padding:20px;
      margin-bottom:30px;
      margin-top:20px;

      animation:fadeInDown;
      animation-duration:2s;
    }
.section8
    {
        max-width:1000px;
        height:300px;
        margin:auto;
        background-color:white;
        
    }


    .right8
    {
        width:100%;
       margin-right:50px;
       margin-top:30px;
        line-height: 2em;
        text-align:center;
    }

/*good bad neither*/    
.sect9header
    {
      max-width:1100px; /*make 100% in mobile*/
      margin:auto;
      background-color:rgb(252, 201, 121, .7); 
      text-align:center;
      padding:20px;
      margin-bottom:30px;
      margin-top:100px;

      animation:fadeInDown;
      animation-duration:2s;
    }
    .section9
    {
        max-width:1350px;
        height:900px;
        margin:auto;
        background-color:white;
        display:flex;
        flex-direction:row;
        justify-content:space-around;
    }
    .left9
    {
        width:55%;
        background-color:white;
        margin-left:150px;
        line-height: 1.7em;
        padding-top:100px;
    }
    .right9
    {
        width:55%;
        height:90%;
        background-image:url(images/streetbag.png);
        background-repeat:no-repeat;
        background-size:contain;
        margin-left:150px;
    }

    .polloptions
    {
        width:100%;
        display:flex;
        flex-wrap: wrap;
        flex-direction:row;
        margin-top:50px;
        justify-content: space-between;
    }

    .polls{
        width:100%;
        margin-top:75px;
        line-height:3em;
        text-align:center;
        font-size:smaller;
    }
    .poll1{
        width:40%;
        height:80px;
        margin:auto;
        background-color:#FBE6D0;
        text-align:center;
        padding-top:30px;
       
}


/* unvisited link */
a:link {
    color: none;
    text-decoration: none;
  }
  
  /* visited link */
  a:visited {
    font-style: oblique;
  }
  
  /* mouse over link */
  a:hover {
   color: rgb(138, 161, 120, .7);
  }
  


    .poll2{
        width:40%;
        height:80px;
        margin:20px;
        background-color:#FBE6D0;
        text-align:center;
        padding-top:30px;
       
    }

    
    h3 
        {
        font-size: 3em;
        font-family:"sans serif";
        color:black;
       margin:auto;
       padding:15px;
        }
  
.footer
{width:100%;
height:100%;
background-color:#C55F2B;
}


/*resources*/
.section10
    {
        height:100%;
        max-width:1350px;
        margin:auto;
        background-color:#FBE6D0;
        display:flex;
        flex-direction:row;
        justify-content:space-between;
        align-items:center;
        padding:40px;
        margin-bottom:60px;

    }

    .column1
    {width:30%;
    height:500px;
 
    display:flex;
    flex-wrap: wrap;
    flex-direction:row;
    scroll-margin-right:20px;
    justify-content:space-around;
}
    .column2
        {width:30%;
        height:500px;
        display:flex;
    flex-wrap: wrap;
    flex-direction:row;
    }

    .column3
        {width:30%;
        height:500px;
        display:flex;
    flex-wrap: wrap;
    flex-direction:row;
    justify-content:space-between;
    }



.section11
{
    color:white;
    padding-left:100px;
    text-align:center;
    line-height:1em;
    text-decoration:none;
}



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

/* Tablet */
   @media screen and (min-width:601px) and (max-width: 900px)
{   body {background-color:white;}

   .title
  {
   height:100%;
   padding-top:200px;
   padding-left:50px;
   box-sizing:border-box;
   margin:auto;
   background-image: none;
   background-size:cover;
   margin:auto;
   background-repeat:no-repeat;
   background-image: url(images/bcgrd.png);
  }

  .gif
  {disaply:none;}


  .gifimage
  {
 display:none;

}
/*******************************************/
  .main
    {
        width:900px;
        height:100%;
        
    }
  .brief
    { 
        width:80%;
        text-align:center;
        margin:auto;
        padding:30px;
        margin-bottom:50px;
    }
    .sect1header
    {
      margin:auto;
     
      
    }
    .section1
        {max-width:700px;
        height:650px;
        margin:auto;
        background-color:white;
        display:flex;
        flex-direction:row;
        justify-content:space-around;
    }

    .left1
    {
        width:40%;
        height:90%;
        margin-left:20px;
        margin-right:30px;
        margin-top:90px;
        background-image:url(images/sect1.png);
        background-repeat:no-repeat;
        background-size:contain;

    }

    .right1
    {
        width:45%;
        background-color:white;
        margin-right:40px;
        line-height: 1.7em;
        margin-top:50px;
    }


    .section2
    {
       max-width:900px;
        margin:auto;
        background-color:white;
        display:flex;
        flex-direction:row;
        justify-content:space-between;
        
    }
    .left2
    {
        width:45%;
        background-color:white;
        margin-left:30px;
        background-size: contain;
        background-repeat:no-repeat;
        line-height: 2em;
        margin-top:none;
       
    }
    .right2
    {
        width:40%;
       
        background-color:white;
        margin-left:20px;
        margin:auto;
        background-image:url(images/cotton.png);
        background-size: contain;
        background-repeat:no-repeat;

    }

    .section4
    {
       width:100%;
       height:100%;
        margin:auto;
        background-color:white;
        display:flex;
        flex-direction:row;
        justify-content:space-between;
       
    }
    .right4{
     
        margin-left: 50px; 
    }

    
    .section5
    {width:100%;
    height:100%;}

    .section6 {
        width: 100%;
        margin: auto;
        margin-top: 50px;
    }


.section7 {
        max-width:700px;
        align-items: center;
}

.section8
    {
        max-width:100%;
        height:400px;
        margin:auto;
        background-color:white;

       
    }

    .left8
    {
    
        width:100%;
        background-image:url(images/whitecotton.png);
        background-repeat:no-repeat;
        background-size:contain;
        margin:auto;


    }

    .right8
    {
        width:100%;
        height:300px;
        background-color:white;
        
    }

.polls {display:auto;}
.polloptions
        {width:100%;
        
        }

.left9{
    margin-left:0px;
        padding-top:10px; 
}
.sect9header
    {
       /*make 100% in mobile*/
      margin:auto;
      background-color:rgb(252, 201, 121, .7); 
      text-align:center;
      padding:20px;
      margin-bottom:30px;
      margin-top:50px;
    }

.right9{display:none;}

    .footer
    {width:100%;
    background-color:#C55F2B;
    }
    
    .section10
        {
            margin:auto;
            background-color:#FBE6D0;
            display:flex;
            flex-direction:row;
            justify-content:space-around;
            align-items:center;
            margin-bottom:60px;
            
    
        }
    
        .column1
            {width:30%;
        
      
      
        
    }
        .column2
            {width:30%;
   
        }
    
        .column3
            {width:30%;
       
           
        }
    
    
    .subhead
        {
            
            width:100%;
            margin:auto;
            font-size: 1.5em;
            line-height: 1em;
            padding-top:270px;
            font-family:"abril-fatface,serif";
            color:#C55F2B;
    
           text-align:center;
            
        }
    .section11
    {
        color:white;
        padding-left:100px;
    }
}  



/**************MOBILE******************/

@media screen and (max-width: 600px) 
     
{body{background-color:white;}

h4
    {font-size:1.5em;
    font-family: "abril-fatface,serif";
    font-weight: 600;
    font-style: normal;
    color:#C55F2B;}
   
.title
  {
   height:60%;
   width:100%;
   padding-top:100px;
   padding-left:10px;
   box-sizing:border-box;
   margin:auto;
    background-image:none;
    background-color:#C55F2B;
  }
h1{font-size:1em;
padding:5px;}
h2{font-size:3em;}

header
{
  width:100%;
  /* height:650px;  */
}

.typing-demo {
    width: 100%;}
  .brief
  { 
      width:90%;
      height:60%;
      text-align:center;
      margin:auto;
      padding:10px;
      margin-bottom:50px;
  }
  .sect1header
  {
      max-width:100%;
    margin:auto;
    animation:none;
  }
  .section1
      {max-width:550px;
        height:100%;
      margin:auto;
      background-color:white;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
  }

  .left1
  {
      width:100%;
      height:500px;
      background-image:url(images/sect1.png);
      background-repeat:no-repeat;
      background-size:contain;
      margin:auto;
      margin-top:20px;
  }
  .right1
  {
      width:80%;
      background-color:white;
      margin-right:10px;
      line-height: 1.7em;
      margin-top:0px;
      margin:auto;
  }


  .sect2header 
  { max-width:100%;
    animation:none;}
  
  
  .section2
  {
    max-width:500px;
    margin:auto;
    background-color:white;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    } 

  .left2
  {
      height:100%;
      width:85%;
      background-color:white;
      margin-left:30px;
     margin-top:0px;
  }
  .right2
  {
      width:80%;
      height:500px;
      
  }

  .sect4header {
      width:100%;
      animation:none;
  }
  .section4
  {
 
     width:100%;
      margin:auto;
      background-color:white;
      display:flex;
      flex-direction:row;
      justify-content:space-between;
  }
  .right4{
      margin-left: 25px; 
      text-align:left;
 
  }

  .sect4header{
      width:90%;
      margin:auto;
      margin-top:20px;
      margin-bottom:20px;

  }
  .section5
  {width:100%;
  height:100%;}

  .sect6header
  {
      width:90%;
    animation:none;}

  .section6 
  { width:100%;
    margin-top:20px;
  }

  .sect6image
  {width:100%;
    height:200px;
    background-size: contain;
  }

.section7 {
      display:none;
}

.sect8header{
    margin-top:30px;
    animation:none;
}

.section8
{
 width:100%;
 height:100%;
 display:flex;
        flex-wrap:wrap;
        flex-direction:column;
        justify-content:space-around;


}

.left8
{
width:80%;
height:100%;
margin:auto;
}

.right8
{
height:100%;
width:80%;
margin-left:30px;
margin-top:0px;
padding:20px;
}

.section9
{
width:100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}

.sect9header
    {
       height:100%;/*make 100% in mobile*/
      margin:auto;
      background-color:rgb(252, 201, 121, .7); 
      text-align:center;
      padding:20px;
      margin-bottom:30px;
      margin-top:10px;
    }
    .left9 {
        width: 100%;
        background-color: white;
        margin-left: 0px;
        line-height: 1.7em;
        padding-top: 0px;
    }

    .right9{
        display:none;
    }

    .polloptions{
        width:100%;
    }

.polls
{display:auto;}

.poll1{
    width:80%;
    margin-left:10px;
    padding:30px;
}
.poll2{
    width:80%;
    margin-left:10px;
    padding:30px;
}

.polloptions
{margin:0px;}
.footer
{width:100%;
background-color:#C55F2B;
}

.section10
    {
        margin:auto;
        background-color:#FBE6D0;
        display:flex;
        flex-direction:column;
        justify-content:space-between;
        align-items:center;
        margin-bottom:60px;
        

    }

    .column1
        {width:100%;
            margin-left:30px;
        
    
}
    .column2
        {width:100%;
       margin-left:30px;
    }

    .column3
        {width:100%;
            margin-left:30px;
    }


.subhead
    {
        display:none;
    }
.section11
{
    color:white;
    padding-left:10px;
font-size:.5em;
}
  






}





/*# sourceMappingURL=style.css.map */