/* #BASE CSS (Initital Setup)
---------------------------------
#BASE START
#HTML5
#BASE CONTENT
#TYPOGRAPHY
#BODY
#HEADINGS
#PARAGRAPHS
#LINKS
#LISTS
#BLOCKQUOTES
#HELPERS
#MEDIA
#IMAGES
#COMPONENTS
#BUTTONS
#BASE LAYOUT
#MEDIAQUERIES
#GRID
#CLEARFIX
#BASE SITE
#STRUCTURE
#HEADER
#LOGO
#FOOTER
#SECTIONS
#SUB PAGES
#NAVIGATION
#TOGGLE-NAV (Default)
--------------------------------- */
/*  #BASE START  */
/*  #HTML5  */
header, footer, aside, nav, section, figure, main, article  {
display: block;
}


body  {
background-image: url("../imgs/bg2.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-color: none;
background-size: cover;
font-size: 87.5%;
margin: 0;
padding: 0;
font-family: 'Lato', Arial;
line-height: 1.5em;
}

h1, h2, h3, h4, h5, h6 {
margin: .5em 0;
}

h1 {
font-size: 3em;
/* 48px / 16px = 3em */
line-height: 1em;
}

h2 {
font-size: 2.25em;
/* 36px / 16px = 2.25em */
line-height: 1.1em;
}

h3 {
font-size: 1.5em;
/* 24px / 16px = 1.5em */
line-height: 1.2em;
}

h4 {
font-size: 1.3125em;
/* 21px / 16px = 1.3125em */
line-height: 1.3em;
}

h5 {
font-size: 1.125em;
/* 18px / 16px = 1.125em */
line-height: 1.4em;
}

h6 {
font-size: 1em;
/* 16px / 16px = 1em */
line-height: 1.5em;
}

.container  {
width: 92%;
padding: 0 4%;
margin: auto;
}


/* MEDIAQUERIES */

/*  SMALL-MOBILE */

/* MEDIUM-TABLET */
@media  (min-width: 768px)  {
.column {
float: left;
margin-right: 8%;
}

.column:last-child  {
margin-right: 0;
}

.one-whole.column  { width:100%}
.one-half.column  { width:46%}
.one-third.column  { width:28%}
.two-thirds.column  { width:64%}
.one-fourth.column  { width:19%}
.column.centered {
margin-left: auto;
margin-right: auto;
}
}

/* LARGE-LAPTOP */
@media  (min-width: 1050px)  {
body{
font-size: 100%;
}
.container  {
width: 900px;
}
}

/* EXTRA LARGE-DESKTOP */
@media  (min-width: 1250px)  {

body  {
font-size: 112.5%;
}
.container  {
width: 1100px;
}
}


/*IMAGES */
img.scale-with-grid  {
max-width: 100%;
height: auto;
padding-bottom: 0;
}

img.corner {
 border-radius: 25px;
}

/*  GRID  */

.row {
padding-bottom: 2.5em;
}

.column  {
margin-bottom: 3em;
}

.column.centered,
.column.centered:last-child  {
margin-left: auto;
margin-right: auto;
float: none;
}



/* HELPER */
.text-centered {
text-align: center;
}

.text-left {
text-align: left;
}

.text-right {
text-align: right;
}

/*  CLEARFIXES  */
.container:after,
.row:after,
.group {
content: "";
display: table;
clear: both;
}



/* BASE SITE */

/* SITE STRUCTURE */
/* HEADER */

.site-header  {
padding: 0 0 1em 0;
border-top: none;
text-decoration: none;
border-bottom: none;
}

.site-branding h1 a{
display: inline-block;
padding: 1em 0 0 0;
max-width: 75%;
text-align: left;
}

.site-header a  {
text-decoration: none;
color: #ffffff;
}


.site-header.no-border .container:after {
border: none;
}

.site-header.fixed {
position: fixed;
width: 100%;
background-color: #fff;
}

/* NAVIGATION */

.selected-print  {
font-family: 'Vollkorn', serif;
font-size: 1.5em;
}

.selected-web  {
font-family: 'Vollkorn', serif;
font-size: 1.5em;
}

.selected-motion {
font-family: 'Vollkorn', serif;
font-size: 1.5em;
}

.sidenav {
  width: 130px;
  position: fixed;
  z-index: 1;
  top: 270px;
  left: 10px;
  background: none;
  overflow-x: hidden;
  padding: 8px 0;
}

.sidenav a {
  padding: 25px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: none;
  display: block;
}

.sidenav a:hover {
  color: #064579;
}

.main {
  margin-left: 140px; /* Same width as the sidebar + left position in px */
  font-size: 28px; /* Increased text to enable scrolling */
  padding: 0px 10px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

/* FOOTER */

.contact{
  margin-bottom: 1em;
  background-color: none;
}

.footer li {
  display: inline-block;
  padding: 1em 1em 8em 1em;
  font-family: 'Quattrocento Sans', sans-serif;
  text-transform: uppercase;
  list-style: none;
  text-decoration: none;
}

.footer.text-centered a:hover {
text-align: center;
text-transform: uppercase;
transition: .3s;
background-size: 200% auto;
color: white;
}

.footer a:visited {
  color: black;
  opacity: .4;
  list-style: none;
  text-decoration: none;
}

.footer ul {
  list-style: none;
  text-decoration: none;
  padding-left: auto;
  padding-right: auto;

}
/* MAIN */
/* Sections */
section {
padding: 0;
}

section.full-width  {
padding: .5em 0 ;
}

.hero h1,
.hero h2{
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
font-size: 3em;
line-height: 1.1em;
margin-top: 0;
}



/* BUTTONS */
button {
font-size: inherit;
}

button, a.button {
display: inline-block;
background-color: #ffac85;
margin-top: .5em;
margin-bottom: .5em;
padding: .75em 1em;
color: white;
text-decoration: none;
border: none;
border-radius: .32em;
-webkit-border-radius: .32em;
-moz-border-radius: .32em;
line-height: 1em;
cursor: pointer;
}

button.alt, a.button.alt {
text-decoration: none;
color: #ffac85;
background-color: white;
border: 1px solid #ffac85;
}

button:hover, a.button:hover {
background-color: grey  ;
color: white;
text-decoration: none;
}




/* Site Specific CSS (Overeides & Custom CSS)

#TYPOGRAPHY OVERRIDES
#CONTENT/STRUCTURAL/LAYOUT OVERRIDES
#NAVIGATION OVERRIDES



/* TYPOGRAPHY OVERRIDES */
a {
  text-decoration: none;
  list-style: none;
  padding: 1em;
}

body#home {
font-family: 'Lato', sans-serif;
background-position: left bottom;
background-repeat: no-repeat;
background-attachment: fixed;
background-color: none;
background-size: 78%;
}

nav#home{
  padding-top: .1em;
}

nav#about{
  padding-top: .1em;
}

.active{
background-color: grey;
}

nav#portfolio{
  padding-top: .1em;
}

nav#contact{
  padding-top: .1em;
}

nav#forfun{
  padding-top: .1em;
}
.email {
list-style: none;
text-align: center;
margin-bottom: 0;
font-family: 'Vollkorn', serif;
font-size: .9em;
font-style: italic;
}

.emailsub {
list-style: none;
text-align: center;
margin-bottom: 0;
font-family: 'Vollkorn', serif;
font-size: .9em;
font-style: italic;
}

.emailhome {
list-style: none;
text-align: center;
margin-bottom: 0;
font-family: 'Vollkorn', serif;
font-size: .9em;
font-style: italic;
}

ul {
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0
}

site-navigation{
margin-top: 0;
}

body{
font-family: 'Lato', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
font-family: 'Quattrocento Sans', sans-serif;
margin: .5em 0;
}



body#about {
font-family: 'Lato', sans-serif;
background-position: center bottom;
background-repeat: no-repeat;
background-attachment: scroll;
background-color: none;
background-size: 84%;
}


body#portfolio {
font-family: 'Lato', sans-serif;
background-position: center bottom;
background-repeat: no-repeat;
background-attachment: scroll;
background-color: none;
background-size: 84%;
}


body#contact {
font-family: 'Lato', sans-serif;
background-position: center bottom;
background-repeat: no-repeat;
background-attachment: scroll;
background-color: none;
background-size: 84%;
}

body#forfun {
font-family: 'Lato', sans-serif;
background-position: center bottom;
background-repeat: no-repeat;
background-attachment: scroll;
background-color: none;
background-size: 84%;
}

#headingsub {
font-family: 'Vollkorn', serif;
font-size: 1.5em;
text-align: left;
list-style:none;
padding-bottom: 2.5em;
opacity: .3;
animation-duration: 1.5s;
   animation-name: fadeAndScale;
   animation-timing-function: cubic-bezier(.71,.55,.62,1.57);
}

#heading {
font-family: 'Vollkorn', serif;
font-size: 1.5em;
text-align: left;
list-style:none;
padding-bottom: 0;
opacity: .3;
animation-duration: .6s;
   animation-name: fadeAndScale;
   animation-timing-function: cubic-bezier(.71,.55,.62,1.57);
}

#description{
font-family: 'Lato', serif;
font-size: .85em;
padding-bottom: 5em;
font-style: italic;
text-align: left;
list-style:none;
animation-duration: 1.3s;
   animation-name: fadeAndScale;
   animation-timing-function: cubic-bezier(.71,.55,.62,1.57);
}


@keyframes fadeAndScale {
    from {
        opacity: 0;
        transform: scale(.9, .9);
    }
    to {
        opacity: .3;
        transform: scale(1, 1);
    }
}

#description-quote-now {
font-family:  'Vollkorn', serif;
font-style: italic;
font-size: 3.5em;
text-align: center;
list-style:none;
opacity: .1;
padding-bottom: .5em;
}


figcaption ul{
margin-top: 1.5em;
}

figcaption ul li{
font-family: 'Vollkorn', serif;
font-size: .7em;
text-align: center;
list-style:none;
line-height: 1.8em;
}

ul li{
text-align: center;
list-style:none;

}

#ddd {
  font-family: 'Vollkorn', serif;
  font-size: 1.5em;
  opacity: .3;
  text-transform: uppercase;
  text-align: left;
  list-style:none;
  padding: 2em 0 .2em 0;
}

#subtitle {
  font-family:'Quattrocento Sans', sans-serif;
  font-weight: bold;
  font-size: .8em;
  text-transform: uppercase;
  letter-spacing: .15em;
}

#copy {
font-family: 'Lato', serif;
font-size: .8em;
padding-bottom: 3em;
text-align: left;
list-style:none;
max-width: 30em;
line-height: 1.4em;
}

#copynospace {
font-family: 'Lato', serif;
font-size: .8em;
padding-bottom: 0;
text-align: left;
list-style:none;
max-width: 30em;
line-height: 1.4em;
}

p {
margin-left: auto;
margin-right: auto;
font-size: 14px;
line-height: 1.3em;
max-width: 25em;
font-family: 'Lato', serif;
}

.mantra1 {
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 1em;
margin-bottom: auto;
font-size: 65px;
line-height: 1.3em;
max-width: 65em;
font-family: 'Vollkorn', serif;
font-weight: 500;
font-style: italic;
color: #ffffff;
line-height: 1.7em;
animation-duration: 1.5s;
   animation-name: fadeAndScale;
   animation-timing-function: cubic-bezier(.71,.55,.62,1.57);
}

.mantra2 {
  text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
font-size: 65px;
line-height: 1.3em;
max-width: 65em;
font-family: 'Vollkorn', serif;
font-weight: 500;
font-style: italic;
color: #ffffff;
line-height: 1.7em;
animation-duration: 1.5s;
   animation-name: fadeAndScale;
   animation-timing-function: cubic-bezier(.71,.55,.62,1.57);
animation-delay: 1s;
}


.mantra3 {
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: 1em;
font-size: 65px;
line-height: 1.3em;
max-width: 65em;
font-family: 'Vollkorn', serif;
font-weight: 500;
font-style: italic;
color: #ffffff;
line-height: 1.7em;
animation-duration: 1.5s;
   animation-name: fadeAndScale;
   animation-timing-function: cubic-bezier(.71,.55,.62,1.57);
   animation-delay: 2s;
}

.thankyoutext {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2em;
  margin-bottom: auto;
  color: #ffffff;
  font-size: 50px;
  line-height: 1.3em;
  max-width: 16em;
  font-family: 'Vollkorn', serif;
  font-weight: 500;
  font-style: none;
  line-height: 1.7em;
}

.fortext{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
  color: #ffffff;
  font-size: 28px;
  max-width: 16em;
  font-family: 'Vollkorn', serif;
  font-weight: 500;
  font-style: none;
  line-height: .5em;
}

.newtext{
  color: #ffffff;
  font-size: 18px;
  line-height: 1em;
  margin-top: 1em;
  margin-bottom: 1em;
}

.typewriter li {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid white; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 1em auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: 0; /* Adjust as needed */
  animation:
    typing 2.5s steps(30, end),
    blink-caret .75s step-end infinite;
    color: #ffffff;
    font-size: 40 px;
    line-height: 1em;
    margin-top: 1em;
    margin-bottom: 1em;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: white; }
}

/*CONTENT/STRUCTURAL/LAYOUT OVERRIDES*/

body img#social{
  margin:.5em;
  display:flex;

}

div.grid{
  padding-bottom: 1em;
}

.site-footer .container:before  {
border: none;
}

.site-navigation li {
font-family: 'Quattrocento Sans', sans-serif;
text-transform: uppercase;
list-style: none;
text-align: right;
display: inline-block;
margin-top: 0;
padding: 0;
}



#sub li{
font-family: 'Quattrocento Sans', sans-serif;
text-transform: uppercase;
list-style: none;
text-align: right;
display: inline-block;
margin-top: 0;
padding: 6em 0 0 2em;
}




.column {
margin-bottom: 1.5em;
}

.container {
  padding: 0;
}






li.extra {
  margin-right: 0;
  list-style: none;
}


li.mantra {
    list-style: none;
}
/* IMAGES */

.zoom {
    padding: 50px;
    transition: transform .2s; /* Animation */
    margin: 0 auto;
}

.zoom:hover {
    transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.section.full-width {
padding-top: 3em;
}

.ddc {
width: 300px;
text-align: center;
}

.now {
  width: 200px;
}

.projectentry:hover .overlay,.projectentry:focus .overlay{
opacity: 1;
}



.projectentry .overlay{
opacity: .001;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
transition: 1s ease;
display:flex;
align-items: center;
justify-content: center;
margin: auto;
}

.projectentry .overlay::before{
content: "";
opacity: .9;
background-color: white;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;

}

.projectentry {
position: relative;
}


article {
  position: relative;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

overlay {
  position: relative;
}

.text {
z-index: 5;
position: relative;
color: black;
font-family: 'Vollkorn', serif;
font-size: 40px;
margin: 0;
padding-right: .2em;
font-weight: bold;
}

.helpertext {
z-index: 5;
position: relative;
color: black;
margin: 0;
padding-left: .2em;
font-size: 20px;
font-style: italic;
font-family: 'Lato', sans-serif;
}


.squaretext {
z-index: 5;
position: relative;
color: black;
font-family: 'Vollkorn', serif;
font-size: 30px;
margin: 0;
padding: 0;
font-weight: bold;
text-align: center;
}

.squarehelpertext {
z-index: 5;
position: relative;
color: black;
margin: 0;
padding: 0;
font-size: 15px;
font-style: italic;
font-family: 'Lato', sans-serif;
text-align: center;
}


/*Gradeint Hover*/
.loader {
margin: auto;
border: 6px solid #f3f3f3;
border-radius: 50%;
border-top: 6px solid #f79768;
border-right: 6px solid #f05d77;
border-bottom: 6px solid #212c67;
border-left: 6px solid #6fccdd;
width: 42px;
height: 42px;
-webkit-animation: spin 3s linear infinite;
animation: spin 3s linear infinite;
}

@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}


.fa {
padding: 20px;
margin-bottom: 0;
font-size: 30px;
width: 30px;
height: 15px;
text-align: center;
text-decoration: none;
border-radius: 50%;
color: black;
}






/* Animated Gradient*/
.seperator-wrapper {
width: 86%;
padding: 0;
margin-left: auto;
margin-right: auto;
}

.seperator {
width: 86%;
height: 3px;
animation: rotate 9s infinite linear;
-webkit-animation: rotate 12s infinite linear;
}

.seperator-footer {
width: 86%;
height: 6px;

}

.seperator-wrapper-footer {
width: 10%;
padding: 0 0 5em 0;
margin-left: auto;
margin-right: auto;
}

@-webkit-keyframes rotate {
from {
background-position: -3000px;
}
to {
background-position: 0px;
}
}

@keyframes rotate {
from {
background-position: -3000px;
}
to {
background-position: 0px;
}
}


.gradient {
background:  #f79768; /* Old browsers */
background: -moz-linear-gradient(left,   #f79768 0%, #f05d77 25%, #212c67 50%, #6fccdd 75%, rgba(48,255,144,1) 100%); /* FF3.6+ */
background: -webkit-linear-gradient(left,   #f79768 0%,#f05d77 25%, #212c67 50%,#6fccdd 75%,#ff9966 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(left,   #f79768 0%,#f05d77 25%,#212c67 50%,#6fccdd 75%,#ff9966 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(left,   #f79768 0%,#f05d77 25%,#212c67 50%,#6fccdd 75%,#ff9966 100%); /* IE10+ */

background: linear-gradient(to right,   #f79768 0%,#f05d77 25%,#212c67 50%,#6fccdd 75%,#ff9966 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=' #f79768', endColorstr='#ff9966',GradientType=1 ); /* IE6-9 */

}

.gradienttwo {
background:  #f79768; /* Old browsers */
background: -moz-linear-gradient(left,   #f79768 0%, #f05d77 25%, #212c67 50%, #6fccdd 75%, rgba(48,255,144,1) 100%); /* FF3.6+ */
background: -webkit-linear-gradient(left,   #f79768 0%,#f05d77 25%, #212c67 50%,#6fccdd 75%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(left,   #f79768 0%,#f05d77 25%,#212c67 50%,#6fccdd 75%); /* Opera 11.10+ */

background: -ms-linear-gradient(left,   #f79768 0%,#f05d77 25%,#212c67 50%,#6fccdd 75%); /* IE10+ */

background: linear-gradient(to right,   #f79768 0%,#f05d77 25%,#212c67 50%,#6fccdd 75%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=' #f79768', endColorstr='#ff9966',GradientType=1 ); /* IE6-9 */

}
/*Hover*/


.site-navigation a:hover {
text-align: center;
text-transform: uppercase;
transition: .3s;
background-size: 200% auto;
color: white;
}

/* Gradient Line */

.border {
display: block;
content: '';
border-bottom: none;
background-repeat: no-repeat;
background-position: center bottom 15px;
background-size: 100% 5px;
background-image: linear-gradient(
to right,
#f79768,#f05d77,#212c67,#6fccdd);
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
-moz-background-inline-policy: each-box;
}



/* NAVICON MENU*/
.menu.navicon {
color: rgba(0,0,0,0);
padding: 0;
}

.menu.navicon::selection {
color: rgba(0,0,0,0);
}

.menu.navicon:after  {
color: #333;
content: '\2630';
font-size: 1.5em;
cursor: pointer;
width: 1em;
height: 1em;
line-height: 1em;
}
.menu.navicon.expanded:after  {
content: '\2715';
}

/*TOGGLE NAV */
.toggle-nav .menu  {
display: none;
}

@media (max-width: 767px)  {
.toggle-nav .site-branding  {
float: left;
padding-top: 1.5em;
}

.toggle-nav .menu  {
display: block;
float: right;
margin-top: 1.2em;
margin-bottom: 1em;
}

.toggle-nav .menu + ul  {
display: none;
}

.toggle-nav .menu.expanded  {
margin-bottom: 1em;
}

.toggle-nav .menu.expanded + ul  {
clear: both;
display: block;
}

.toggle-nav .menu + ul li  {
clear: both;
margin: 0;
padding: .5em 0 0 0;
display: block;
}
.toggle-nav .menu + ul li a {
transition: all .3s ease;
color: black;
}
.toggle-nav .menu + ul li a:hover {
color: #fff;
background: white;
}

.mantra1 {
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 1em;
margin-bottom: auto;
font-size: 20px;
line-height: 1.3em;
max-width: 65em;
font-family: 'Vollkorn', serif;
font-weight: 500;
font-style: italic;
color: #ffffff;
line-height: 1.7em;
animation-duration: 1.5s;
   animation-name: fadeAndScale;
   animation-timing-function: cubic-bezier(.71,.55,.62,1.57);
}

.mantra2 {
  text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
font-size: 20px;
line-height: 1.3em;
max-width: 65em;
font-family: 'Vollkorn', serif;
font-weight: 500;
font-style: italic;
color: #ffffff;
line-height: 1.7em;
animation-duration: 1.5s;
   animation-name: fadeAndScale;
   animation-timing-function: cubic-bezier(.71,.55,.62,1.57);
animation-delay: 1s;
}


.mantra3 {
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: 1em;
font-size: 20px;
line-height: 1.3em;
max-width: 65em;
font-family: 'Vollkorn', serif;
font-weight: 500;
font-style: italic;
color: #ffffff;
line-height: 1.7em;
animation-duration: 1.5s;
   animation-name: fadeAndScale;
   animation-timing-function: cubic-bezier(.71,.55,.62,1.57);
   animation-delay: 2s;
}


}


/* MEDIAQUERIES OVERRIDES*/

/* MOBILE */
@media (max-width:767px)  {
.one-half.column  {
width: 100%;
margin-right: 0;

}

img.scale-with-grid  {
max-width: 80%;
height: auto;
padding-bottom: 0;
}

.site-navigation li {
list-style: none;
text-align: right;
display: block;
margin: 0;
}
.site-branding img {
width: 500px;
}
ul{
margin-top: .5em;

}


.mantra {
font-size: 12px;
}

.seperator-wrapper {
width: 100%;
padding-top: 5em;
margin-left: auto;
margin-right: auto;
}

.seperator {
width: 100%;
height: 3px;
animation: rotate 15s infinite linear;
-webkit-animation: rotate 15s infinite linear;
}


.site-branding img {
width: 100px;
}


}


/* MEDIUM-TABLET */
@media  (min-width: 768px)  {
.site-branding img {
width: 250px;
padding-top: 1.3em;
padding-left: 0em;
}
#logo2 img {
width: 100px;}

.mantra1 {
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 1em;
margin-bottom: auto;
font-size: 35px;
line-height: 1.3em;
max-width: 65em;
font-family: 'Vollkorn', serif;
font-weight: 500;
font-style: italic;
color: #ffffff;
line-height: 1.7em;
animation-duration: 1.5s;
   animation-name: fadeAndScale;
   animation-timing-function: cubic-bezier(.71,.55,.62,1.57);
}

.mantra2 {
  text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
font-size: 35px;
line-height: 1.3em;
max-width: 35em;
font-family: 'Vollkorn', serif;
font-weight: 500;
font-style: italic;
color: #ffffff;
line-height: 1.7em;
animation-duration: 1.5s;
   animation-name: fadeAndScale;
   animation-timing-function: cubic-bezier(.71,.55,.62,1.57);
animation-delay: 1s;
}


.mantra3 {
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: 1em;
font-size: 35px;
line-height: 1.3em;
max-width: 65em;
font-family: 'Vollkorn', serif;
font-weight: 500;
font-style: italic;
color: #ffffff;
line-height: 1.7em;
animation-duration: 1.5s;
   animation-name: fadeAndScale;
   animation-timing-function: cubic-bezier(.71,.55,.62,1.57);
   animation-delay: 2s;
}

}

/* Animated Gradient*/
.seperator-wrapper {
width: 100%;
padding-top: 5em;
margin: 0;
}

.seperator {
width: 100%;
height: 3px;
animation: rotate 15s infinite linear;
-webkit-animation: rotate 15s infinite linear;
}
.mantra {
font-size: 14px;
}

.site-header .site-branding {
float: left;
display: inline-block;

}

@keyframes fade {
    from {
opacity: 0;
        transform: scale(.9, .9);
    }
    to {
opacity: 1;
        transform: scale(1, 1);
    }
}


.site-header .site-navigation {
float: right;
text-align: right;
}
.site-header .site-navigation ul {
border: none;
border-top: none;
margin-top: 0;
text-align: right;
}
}


/* LARGE-LAPTOP */
@media  (min-width: 1050px)  {
.site-branding img {
width: 300px;
padding-top: .7em;
padding-left: 0;
}
#logo2 img {
width: 150px;
}

}

/* EXTRA LARGE-DESKTOP */
@media  (min-width: 1250px)  {
.site-branding img {
width: 400px;
padding: 0;
}

.mantra1 {
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 1em;
margin-bottom: auto;
font-size: 65px;
line-height: 1.3em;
max-width: 65em;
font-family: 'Vollkorn', serif;
font-weight: 500;
font-style: italic;
color: #ffffff;
line-height: 1.7em;
animation-duration: 1.5s;
   animation-name: fadeAndScale;
   animation-timing-function: cubic-bezier(.71,.55,.62,1.57);
}

.mantra2 {
  text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
font-size: 65px;
line-height: 1.3em;
max-width: 65em;
font-family: 'Vollkorn', serif;
font-weight: 500;
font-style: italic;
color: #ffffff;
line-height: 1.7em;
animation-duration: 1.5s;
   animation-name: fadeAndScale;
   animation-timing-function: cubic-bezier(.71,.55,.62,1.57);
animation-delay: 1s;
}


.mantra3 {
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: 1em;
font-size: 65px;
line-height: 1.3em;
max-width: 65em;
font-family: 'Vollkorn', serif;
font-weight: 500;
font-style: italic;
color: #ffffff;
line-height: 1.7em;
animation-duration: 1.5s;
   animation-name: fadeAndScale;
   animation-timing-function: cubic-bezier(.71,.55,.62,1.57);
   animation-delay: 2s;
}

}


.container {
padding-top: 3em;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal:hover{

}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

.modal-content2 {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}