@font-face {
  font-family: 'farsetb';
  src: url('farset_b-webfont.woff2') format('woff2'),
       url('farset_b-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* UNIVERSAL */

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  left: 0;
  top: 0;
  font-size: 100%;
}

/* ROOT FONT STYLES */

* {
 


font-family: "orpheuspro", serif;
font-weight: 700;
font-style: normal;
}


     

/* ==== TYPOGRAPHY ==== */

h1, h2, h3,h4,h5,h6 {
  font-family: 'farsetb';
}

h1 {
  font-size: 15rem;
  margin: 0;
}

h2 {
  font-size: 6.25rem;
  margin: 0;
}

h3 {
  font-size: 4.25rem;
  padding: 0;
  margin: 0;
}

h4 {
  font-size: 2.25rem;
  margin-top: 1em;
  margin-bottom: 0.5em;
}

h5 {
  font-size: 8.25rem;
  margin-top: 0.2em;
  margin-bottom: 0em;
}

h6 {
  font-size: 10em;
  font-family: "farsetb";
  color:  #25A6A0; 
  padding: 0;
  margin: 0;
}

p {
  font-size: 1.5rem;
  line-height: 1.8;
  font-family: "orpheuspro", serif;
  font-weight: 400;
  font-style: normal;
}

.small {font-size: 1.2rem; margin: 0;}

a {text-decoration: none; color: #2c2c2b;}
a:hover {color: #25A6A0; text-decoration: underline; }
a.button {color: white;}

ul {padding: 0px; margin: 0px; font-size: 1.2em; }
ul li {list-style: none;}

.blue a {text-decoration: none; color: #25A6A0;}
.blue a:hover {color: #25A6A0; text-decoration: underline; }
.blue-text {color: #ffffff;}
.green-text {color: #25A6A0;}
.ixd {color: #3E99D8;}


.decks a {text-decoration: none; color: #ffffff;}
.decks a:hover {color: #ffffff; text-decoration: underline; }

.font-light {
  font-weight: 300;
}

.font-regular {
  font-weight: 400;
}

.font-heavy {
  font-weight: 700;
}

strong {
    font-weight: 600;
}

/* POSITIONING */

.left {
  text-align: left;
}

.right {
  text-align: right;
}

.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.justify {
  text-align: justify;
}

/* ==== HEADING ==== */

h1 a {text-decoration: none; color: black;}
h1 a:hover {color: ##25A6A0;}

/* ==== LOGO ==== */

.logo {
    display: block; 
}


    span {
    font-size: 18px;
    font-weight: 400; 
    
    display: block;
    &::before {
      content: attr(data-text);
   
    }
  }

  h6 span {
    font-size: 0.5em;
    display: inline-block;
  }


            
/* ==== GENERAL STYLES ==== */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #eeeeee;
  margin: 1em 0;
  padding: 0; 
}

img {max-width: 100%;
    height: auto;}


.no {padding: 0px; margin: 0px;}
.padding {margin-top: 4em; margin-bottom: 4em;}
.panel {color: white; padding: 1em; padding-bottom: 4em; margin-top: 4em; border-radius: 15px; background-image: linear-gradient(to bottom right, #A29DBB, #25A6A0)  }
.panelpad{padding-top: 3em;}

/* ==== MISC ==== */

.display {display: none;}
    .padtop {margin-top: 6em;}
    .pad {margin-bottom: 2em;}
    .pad1 {margin-bottom: 0.5em;}


    .radius {border-radius: 10px;}
    .grad-image {
      background-image: url("../img/ellie-mcgurk.jpg"); height: 550px; padding-top: 4em; background-repeat: no-repeat;}
      .white {color: #ffffff;}
      .chip ul {list-style: none;}
      .chip ul li {display: inline-block; background-color: #2c2c2b; padding: 10px; border-radius: 10px; color: white;}

.anniversary {font-size: 30em; margin: 0; padding: 0px;   background: -webkit-linear-gradient(#A19DBB, #218883);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;}
  .weare {font-size: 0.3em;}

/* ==== FOOTER ==== */

.footer {
    background-color: #323031;
    border-top: 10px solid;
    border-image: linear-gradient(to right, #A29DBB, #25A6A0) 1;
    color: white;
    margin-top: 4em;
    padding-top: 2em;
    font-size: 0.8em;
    min-height: 10em; 
}

address {font-style: normal;}

.footer a {text-decoration: none; color: white;}
.footer a:hover {color: #25A6A0; text-decoration: underline;}
.bt {border-top: 1px solid white;}
.black {background-color: #000000; padding: 0.5em;}



/* ==== PORTFOLIO ==== */

.folio a {color: #25A6A0; line-height: 1.5;}
.folio a:hover {color: #000;}

/* ==== RESEARCH ==== */

.research ul li { padding: 1em;}
.research a {color: black;}
.research a:hover {color: #25A6A0;}

/**
*** SIMPLE GRID
*** (C) ZACH COLE 2016
**/

/* ==== GRID SYSTEM ==== */

.wrapper {
    width:100%;
}

.container {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.row {
  position: relative;
  width: 100%;
}

.row [class^="col"] {
  float: left;
  margin: 0.5rem 2%;
  min-height: 0.125rem;
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
  width: 96%;
}

.col-1-sm {
  width: 4.33%;
}

.col-2-sm {
  width: 12.66%;
}

.col-3-sm {
  width: 21%;
}

.col-4-sm {
  width: 29.33%;
}

.col-5-sm {
  width: 37.66%;
}

.col-6-sm {
  width: 46%;
}

.col-7-sm {
  width: 54.33%;
}

.col-8-sm {
  width: 62.66%;
}

.col-9-sm {
  width: 71%;
}

.col-10-sm {
  width: 79.33%;
}

.col-11-sm {
  width: 87.66%;
}

.col-12-sm {
  width: 96%;
}

.row::after {
	content: "";
	display: table;
	clear: both;
}

.hidden-sm {
  display: none;
}

@media only screen and (min-width: 10.00em) {  /* 320px  */

  
            .main-nav ul {
                display: flex;
                flex-direction: column;
                text-align: center;
             
                }
                
            .main-nav ul li {
            padding: 10px;
                }
    
            .button {
              padding: 15px 22px;
              text-align: center;
              text-decoration: none;
              cursor: pointer;
              font-size: 1.2rem; 
              color: white;
              background-image: linear-gradient(to bottom right, #A29DBB, #25A6A0) ;
              border: 2px solid #1F8782;
              border-radius: 10px;
            }

            .button:hover {
              background-image: linear-gradient(to bottom right, #2c2c2b, #000000);
              color: #25A6A0;
              padding: 15px 22px;
              text-align: center;
              text-decoration: none;
              cursor: pointer;
              border: 2px solid #2c2c2b;
            }

            .button-white {
              padding: 15px 22px;
              text-align: center;
              text-decoration: none;
              cursor: pointer;
              font-size: 1.2rem; 
              color: black;
              background-color: #ffffff;
              border: 2px solid #ffffff;
              border-radius: 10px;
            }

            .button-white:hover {
              background-color: black;
              color: white;
              padding: 15px 22px;
              text-align: center;
              text-decoration: none;
              cursor: pointer;
            }
           
            h1 {font-size: 7em;}
            h5 {font-size: 4.25rem;}
         
              .display {display: none;}

              .logo {
                text-align: center;
              }

}



@media only screen and (min-width: 33.75em) {  /* 540px  */
  .container {
    width: 80%;
  }
  
 
            .main-nav ul {
                display: flex;
                flex-direction: column;
    }
    
                .button {
              padding: 15px 22px;
              text-align: center;
              text-decoration: none;
              cursor: pointer;
              font-size: 1.2rem; 
              color: white;
              background-color: #2c2c2b;
              border: 2px solid #2c2c2b;
              border-radius: 10px;

            }

            .button:hover {
              background-color: white;
              color: black;
              padding: 15px 22px;
              text-align: center;
              text-decoration: none;
              cursor: pointer;
              border: 2px solid #2c2c2b;

            }
           
            .display {display: none;}


    
   

@media only screen and (min-width: 45em) {  /* 720px */
  
  .main-nav ul {
    display: flex;
    flex-direction: column;
}
  
  .col-1 {
    width: 4.33%;
  }

  .col-2 {
    width: 12.66%;
  }

  .col-3 {
    width: 21%;
  }

  .col-4 {
    width: 29.33%;
  }

  .col-5 {
    width: 37.66%;
  }

  .col-6 {
    width: 46%;
  }

  .col-7 {
    width: 54.33%;
  }

  .col-8 {
    width: 62.66%;
      
  }

  .col-9 {
    width: 71%;
  }

  .col-10 {
    width: 79.33%;
  }

  .col-11 {
    width: 87.66%;
  }

  .col-12 {
    width: 96%;
  }

  .hidden-sm {
    display: block;
  }
    

  .main-nav ul {
    display: flex;
    flex-direction: row;
  
    }
                
 .main-nav ul li {
     
        padding-top: 40px;
        text-align: center;
    }
    
  .main-nav ul li a:hover {
    color: #3E99D8; 
    }
    
    .display {display: none;}
            


@media only screen and (min-width: 90em) { /* 1440px */
  .container {
    width: 75%;
    max-width: 90rem;
  }
    
h1 {font-size: 15rem;}
h5 {font-size: 8.25rem;}
    
/* ==== NAVIGATION ==== */
    


  .main-nav ul {
    display: flex;
    flex-direction: row;
    text-align: center;
    justify-content: space-between;
    }
                
  .main-nav ul li {
    padding-top: 40px;
    
    }
    
  .main-nav ul li a:hover {
    color: #25A6A0;
    text-underline-offset: 60px; 
    }
    
.button {
  padding: 15px 22px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  font-size: 1.2rem; 
  color: white;
  background-color: #2c2c2b;
  border: 2px solid #1F8782;
  border-radius: 10px;

}

.button:hover {
  background-color: #2c2c2b;
  color: white;
  padding: 15px 22px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid #2c2c2b;
}

.button-blue {
  background-color: #2c2c2b;
  border: 2px solid #2c2c2b;
  color: black;
}

.hover { 
  top:-50px; 
  left:-35px; 
  display:block; 
  z-index:999; 
  cursor: pointer; 
  -webkit-transition-property: all; 
  -webkit-transition-duration: 0.3s; 
  -webkit-transition-timing-function: ease; 
  } 
  
  /*change the number below to scale to the appropriate size*/ 
  .hover:hover { 
  transform: scale(1.05); 
  
  }