/* ==================================================================================
/* ==================================================================================
   PAGE CONTAINER(s)
   ================================================================================== */
    
/* ---- psd page width = 1400px 87.5em ---- */
/* ---- grid width = 1185px 74.063em 84.642857142857% (1185px / 1400px) ---- */
/* ---- gutter width = 45px 2.8125em ---- */
/* ---- row height full = 90px 5.625em ---- */
/* ---- row height half = 45px 2.8125em ---- */
/* ---- row height quarter = 22.5px 1.40625em ---- */

* {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box; 
	-ms-box-sizing:border-box;
	-o-box-sizing:border-box;
	box-sizing:border-box;
}
html, body {height: 100%;}

html {
    background-color: transparent !important;
	scroll-behavior: smooth; 

}

#page {
   	min-height: 100%;
	position: relative;
	width: 100%;
	font-family: "ff-meta-serif-web-pro", serif;
	font-style: normal;
    font-weight: 500;
}
#to-top {
    z-index: 99;
    position: fixed;
    bottom: 13em;
    right: 1em;
    display: none;
    width: 2.25em;
    height: 2.25em;
    background: transparent url("../img/global/to-top.png") center center no-repeat;		
    background-image: -webkit-linear-gradient(transparent, transparent), url("../img/global/to-top.svg");
    background-image: linear-gradient(transparent, transparent), url("../img/global/to-top.svg");
}
@media screen and (min-width: 30em){ /* 480px */
#to-top {bottom: 11em;right: 1em;}
}
/* ---- 768 ( + ) ---- */
@media screen and (min-width: 48em){ /* 768px */
#to-top {bottom: 12em;right: 1.25em;}
}
/* ---- 960 ( + ) large desktop ---- */
@media screen and (min-width: 60em){ /* 960px */
#to-top {bottom: 10em;right: 1.25em;}
}

@media (max-width:60em) {
  img#sentenceanalysis {
    display: none;
  }
	  #gollum {
    display: none;
  }
}


.row_lasswell{
      position: relative;
}


.box {
  display: block; 
  /*z-index: 1; */
  /*left: 0;*/
  /*top: 0;*/
  /*width: 100%; */
  /*height: 100%; */
  background-color: rgb(0,0,0); 
  background-color: transparent; 
}

.child-box-content {
  text-align: center;
}
.child-box-content span {
  display: inline-block;
  padding: 20px;
  background-color: white;
  z-index: 9999;

}
.child-box-content p {
  color: #3272bc;
	text-align: center;
	font-family: "brandon-grotesque";
  font-size: 12px;
  margin-bottom: 10px;
  margin-top: -5px;
  font-weight: bolder;
  padding-top: 7px;
}
.child-box-border {
  border: 2px solid black;
}
.icons i {
  font-size: 50px;
}

.box-content {
  background-color: #fefefe;
  margin: auto;
  padding: 25px;
  width: 100%;
}
.icons {
  background: #3272bc;
  color: white;
  border-radius: 50%;
  padding: 30px;
}
.column_lasswell {
  float: left;
  width: 20%;
  height: 250px;
  position: relative;
}
.row_lasswell:after {
  content: "";
  display: table;
  clear: both;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

.center2 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  text-align: center;
}

.center2 p {
  text-align: center;
}

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

/* Styling for the logo image */
.logo-img {
  width: 280px;
  height: auto;
  padding-left: 7.5em;
  margin-top: -0.5em;
  display: block; /* Make the image block-level so it behaves like a block element */
  margin-left: 0; /* Ensures no unwanted margin is pushing it */
  margin-bottom: 1.2em;	
}

.socialmediamorsoe {
  display: flex; /* Aligns the images in a row */
  gap: 10px; /* Optional: Adds space between the images */
    padding-right: 9em;	
	margin-bottom: 1.4em;
}

.socialmediamorsoe img {
  width: 35px;
  height: auto;
}
/* Styling for the container */
.morsoe {
  display: flex;
  justify-content: flex-start; /* Aligns items to the left */
  align-items: center; /* Optional: Vertically centers the image */
  height: auto; /* Adjust as needed */
}

.orange {
  background-color: #e8712d;
  width: 100%;
  height: 2.2vw;
}

.blue-footer {
    background-color: #357a7e;
    width: 100%;
    height: 8.5vw;
    border-top: 1px solid #000000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2em; /* Gives some padding on both sides */
}

.blue-footer p {
    color: white;
    font-size: 0.95em;
    font-weight: 100;
}

.copyright {
    /* For venstre side */
    padding-left: 0;
}

.email {
    /* For højre side */
    text-align: right;
}

.orange p{
  padding-right: 13em;
  padding-top: 0.5em;
}

.orange a{
  color: white;
  font-size: 0.9em;
}


.blue-green {
  background-color: #1b4652;
  width: 100%;
  height: 3.3vw;
}

/* ==================================================================================
   BRAND IMAGE ASSIGNMENTS
   ================================================================================== */

.brand2 {
    position: relative; /* Ensure the container can position its child elements */
    padding: 0; /* Remove any padding */
    margin: 0; /* Remove any margin */
    width: 100%; /* Ensure it takes up the full width of the parent */
    height: 100%; /* Optional: Adjust based on the desired height */
    overflow: hidden; /* Ensure no overflow from the child elements */
}

.full-width-img {
    position: absolute; /* Position the image absolutely within the container */
    top: 0;
    left: 0;
    width: 100%; /* Make the image take up the full width */
    height: 100%; /* Make the image take up the full height */
    object-fit: cover; /* Cover the entire container without distortion */
    margin: 0; /* Ensure no margins */
    padding: 0; /* Ensure no padding */
}

/* ==================================================================================
   SLIDER
   ================================================================================== */
.slider {
  object-fit: contain;
}

@media only screen and (max-width: 750px) {
.slider img{
	height: 100vw;
  object-fit: cover; object-position: 70% 0;
}
}

@media only screen and (max-width: 750px) {
.slider2 img{
	height: 100vw;
  object-fit: cover; object-position: 50% 0;
}
	}

@media only screen and (max-width: 750px) {
.slider3 img{
	height: 100vw;
  object-fit: cover; object-position: 35% 0;
}
}

.column_lasswell {
  transition: all .2s ease-in-out;
}
.column_lasswell:hover{ transform: scale(1.1); cursor: pointer;
}

@media only screen and (max-width: 800px) and (min-width: 600px) {
.child-box-content span {
    padding: 12px;
  }
  .column_lasswell {
    width: 33.33%;
  }
}

@media only screen and (max-width: 599px) and (min-width: 410px) {
.child-box-content span {
    padding: 12px;
  }
  .column_lasswell {
    width: 50%;
  }
}
@media only screen and (max-width: 409px) and (min-width: 200px) {
.child-box-content span {
    padding: 12px;
  }
  .column_lasswell {
    width: 100%;
  }
}

@media only screen and (max-width: 1024px) and (min-width: 801px) {
.child-box-content span {
    padding: 12px;
  }
  .column_lasswell {
    width: 30%;
  }
 
}

@media only screen and (max-width: 1024px)  {
	.line {
    display: none;
  }
}

.screening {  overflow-y: hidden; /* Hide vertical scrollbar */
  overflow-x: hidden; /* Hide horizontal scrollbar */}


.column_begrebspar {
  float: left;
  width: 50%;	
  background: #f4f4f4;  background-image: url("dictionarybg.png"); color: #222222; border: 1px solid rgb(0, 0, 0, 0.2);
  outline-width: 1px; padding-bottom: 1em; padding-left: 1em; padding-right: 1em; padding-top: 0.3em; font-size: 0.9em; margin-bottom: 1em;}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* ==================================================================================
   DIV ANIMATED BG
   ================================================================================== */

.slider-box {
  float: right;
  margin: 10px 20px;
  position: relative;
  z-index: 1000;
}

#range {
  margin-top: 5px;
  color: #eee;
  font-size: 10pt;
  margin-left: 10px;
  position: relative;
}

#specks {
  position: absolute;
  z-index: 999;
  height: 100vh;
  width: 100vw;
}

.speck {
  opacity: 0;
  height: 4px;
  width: 4px;
  background: url('http://i1272.photobucket.com/albums/y391/matthew_williams10/speck_zpsu9xym9zl.png');
  background-size: cover;
  position: absolute;
  border-radius: 10px;
  z-index: 99;
}

.img {
  position: absolute;
  height: 100000px;
  width: 100000px;
  top: -8500px;
  left: -8000px;
  animation-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750);
  animation-name: float;
  animation-iteration-count: infinite;
}

#img-1 {
  opacity: 0.25;
  background: url('https://image.ibb.co/jcTvpv/dust1.jpg');
  background-repeat: repeat;
  animation-duration: 600s;
}

#img-2 {
  opacity: 0.2;
  background: url('https://image.ibb.co/goU1Uv/dust2.jpg');
  background-repeat: repeat;
  animation-duration: 450s;
}

#img-3 {
  opacity: 0.15;
  background: url('https://image.ibb.co/cymRwa/dust3.jpg');
  background-repeat: repeat;
  animation-duration: 350s;
}
/*ANIMATIONS*/

@keyframes twinkle {
  0% {
    transform: translate(0px, 0px);
  }
  30% {
    opacity: 0;
  }
  50% {
    opacity: 0.75;
  }
  70% {
    opacity: 0;
  }
  100% {
    transform: translate(175px, 100px);
  }
}

@keyframes float {
  0% {
    transform: translate(0px, 0px);
  }
  100% {
      transform:translate(8000px, 4000px);
  }
}

/* ==================================================================================
   MARK WORD CLASS GRAMMAR BUTTON EXERCISE
   ================================================================================== */

.container_markwords {margin-left: 10%; margin-right: 10%; font-style: italic; font-size: 15px;}


 .mainContent {
      margin-top: 10%;
	 font-style: italic;
    }

    @media only screen and (max-width: 600px) {
      .mainContent {
        margin-top: 50%;
      }
    }

    .btn-group>.btn:hover,
    .btn-check:checked+.btn-outline-secondary {
      background: none;
      border-color: #000000;
	  cursor: pointer;
      color: black;
      box-shadow: 0 0 0 0.10rem rgb(0 0 0 / 10%);
    }

    #actionButtons {
      text-align: right;
    }

input[type="radio"]{
    visibility:hidden;
}


    .markSub {
      background-color: rgba(255, 0, 0, 0.3);
    }

    .markVerb {
      background-color: rgba(0, 100, 200, 0.3);
    }

    .markObj {
      background-color: rgba(0, 255, 0, 0.3);
    }

    .text-success {
      color: #28a745 !important;
    }

/* ==================================================================================
   PERFECT GRAMMAR
   ================================================================================== */
.exercise {position: relative; align: center;}

.userInput input{width:150px!important}

.exerciseButton{width:75px}#content{line-height:1;margin:auto;text-align:left;font-weight:200; padding: 5px;}

.exerciseButton{width:75px;background-color:#000;border:none;color:#fff;padding: 5px; margin-left: 2em; text-decoration:none;text-transform:uppercase;font-size:12px;outline:2px solid #fff;outline-offset:2px}

.userInput {background: #fff!important} input{min-width:50px; outline:none!important;border:none!important; border-radius:0px!important; padding:5px!important; background-color: #E5E5E5}

.correctnessIndicator{padding:2px; width: 5%; height: 5%;}


/* ==================================================================================
   MODAL WRITTEN ASSIGNMENTS
   ================================================================================== */
#overlay_level {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;	
background-color: #000;
filter:alpha(opacity=85);
-moz-opacity:0.85;
-khtml-opacity: 0.85;
opacity: 0.85;
z-index: 100;
display: none;
}
.cnt223 a{
text-decoration: none;
}
.popup{
width: 100%;
margin: 0 auto;
display: none;
position: fixed;
z-index: 101;
}
.cnt223{
min-width: 24em;
width: 24em;
min-height: 11em;
margin: 100px auto;
 background: url("../img/texture.png") no-repeat right #ddd;
position: relative;
z-index: 103;
padding: 15px 35px;
}
.cnt223close {    position: absolute;
                  color: #aaaaaa;
                  font-size: 25px;
	 			  top: -5px;
	 			  right: 0px;
                  font-weight: lighter;
                  padding: 1px 10px;
			      z-index: 1002;
	 			  cursor: pointer;
                  }	

.cnt223close:hover { 
                  color: #000000;
				  	  -webkit-transition: all 200ms ease-in-out;
  -moz-transition: all 200ms ease-in-out;
  -ms-transition: all 200ms ease-in-out;
  -o-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
                  }	
	
.cnt223 p{
clear: both;
    color: #555555;
    /* text-align: justify; */
    font-size: 20px;
    font-family: sans-serif;
}
/* Justering af h1 elementer i popup'en */
.cnt223 h1 {
    font-size: 0.8em;
    letter-spacing: normal;
    line-height: 1.4;
    margin-bottom: 1em;
    margin-top: 0em;
}

/* Justering af label under h1 */
.cnt223 label h1 {
    font-family: "brandon-grotesque", sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 0.6em;
    text-transform: uppercase;
    display: block;
}

.checkbox-container {
    display: flex;
    align-items: center; /* Align items vertically */
    gap: 0em; /* Adjust spacing between checkbox and label */
}

/* Stil for checkbox */
.custom-checkbox {
    width: 17px;
    height: 17px;
    background-color: #fff; /* Hvid baggrund som standard */
    border-radius: 3px;
    border: 2px solid #000;
    position: relative;
    display: inline-block;
    vertical-align: middle;
	margin-top: -1px;
    margin-right: 0px; /* Justering for afstand mellem checkbox og tekst */
	margin-left: 2.5em;
}

/* Når fluebenet er valgt, skifter baggrunden til sort */
.custom-checkbox:checked {
    background-color: #000; /* Sort baggrund når fluebenet er valgt */
    border: 2px solid #000;
}

/* Vis fluebenet som hvidt */
.custom-checkbox:checked::after {
    position: absolute;
    top: 0;
    left: 2px;
    color: #fff; /* Hvid flueben */
    font-size: 14px; /* Juster fluebenets størrelse */
}

/* Gør label klikbar */
.cnt223 label {
    cursor: pointer;
    display: flex;
}


.cnt223 p a{
color: #d91900;
font-weight: bold;
}
.cnt223 .x{
float: right;
height: 35px;
left: 22px;
position: relative;
top: -25px;
width: 34px;
}
.cnt223 .x:hover{
cursor: pointer;
}
	
select {
    background: url("../img/arrowdown1.png") no-repeat right #ddd;
    background-size: 16px 16px;
    background-color: #000000;
    -webkit-appearance: none;
    background-position-x: 354px;
    color: #FFFFFF;
    text-align: center; /* Centers text */
    text-align-last: center; /* Ensures the selected option text is centered */
    width: 100%;
    border: 0px;
    outline: 0 !important;
    padding: 4px 2px 4px 2px;
    font-size: 0.75em;
}

/* Ensuring text is centered in the dropdown options */
select option {
    text-align: center; /* Centers text for each option */
}

@media only screen and (max-width: 724px)  {
.cnt223{
min-width: 60%;
width: 70%;
min-height: 50%;
margin-top: 0px; /* Adjust this value as needed */
 background: url("../img/texture.png"); background-size: cover;
position: relative;
z-index: 103;
padding: 15px 35px;
}

.cnt223 label h1 {
    font-family: "brandon-grotesque", sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 0.6em;
	margin-right: 1em;
	margin-left: -1em;
    text-transform: uppercase;
    display: block;
	text-align: left;
}

.custom-checkbox {
    width: 17px;
    height: 17px;
    background-color: #fff; /* Hvid baggrund som standard */
    border-radius: 3px;
    border: 2px solid #000;
    position: relative;
    display: inline-block;
    vertical-align: middle;
	margin-left: 1em;
	
}	
	
select {
	 background: black;
}	

	select option {
  text-align: center;
}

}


/* ==================================================================================
   BLACK HEADER
   ================================================================================== */

.black_header {text-align: center; width: 60%; margin: auto; color:white; font-size: 1.25em; font-weight: 800; padding-bottom: 0.1em; padding-top: 0.1em;}

.black_header2 {text-align: center; width: 100%; margin: auto; color:white; font-size: 1em; font-weight: 800; padding-bottom: 0.1em; padding-top: 0.1em;}

.black_header3 {text-align: center; width: 80%; margin: auto; color:white; font-size: 1em; font-weight: 800; padding-bottom: 0.1em; padding-top: 0.1em;}

/* ==================================================================================
   GRID LINKERS
   ================================================================================== */

.grid_linkers {
  height: 90vh;
  margin: 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}
.cell {
  color: white;
  font-size: 0.85rem;
  text-align: center;
  padding: 1rem;
}
.cell-1 {
  background: rgba(7, 42, 108, 0.3);	
}
.cell-2 {
  background: rgba(7, 42, 108, 0.5);	
}
.cell-3 {
  background: rgba(7, 42, 108, 0.3);	
}
.cell-4 {
  background: rgba(7, 42, 108, 0.5);	
}
.cell-5 {
  background: rgba(7, 42, 108, 0.3);	
}
.cell-6 {
  background: rgba(7, 42, 108, 0.5);	
}
.cell-7 {
  background: rgba(7, 42, 108, 0.3);	
}
.cell-8 {
  background: rgba(7, 42, 108, 0.5);	
}
.cell-9 {
  background: rgba(7, 42, 108, 0.3);	
}

/* ==================================================================================
    16mm / IMAGE CONTAINER
   ================================================================================== */


.image-container {
    position: relative;
    width: 100%;
    height: 100%;
	cursor: pointer;
}

.image-container .after {
    position: absolute;
	text-align: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.0;
	  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  -ms-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
    color: #FFF;
}

.image-container .after h1{
font-size: 0.85em; color: #ffffff; margin: 1vw; font-family: "brandon-grotesque";
  top: 90%;
  left: 90%;
}

.image-container .after p{
font-size: 0.75rem; color: #ffffff; text-align: center; margin: 1vw; top: 90%;
  left: 80%;}


.image-container:hover .after{
    opacity: 1.0;
    background: rgba(0, 0, 0, .7);	
	
}

.image-container:hover .after p{
	 /* This section calls the slideInFromLeft animation we defined above */
  animation: 650ms ease-out 0s 1 fadeInBottom;	
	
}

.image-container:hover .after h1{
	 /* This section calls the slideInFromLeft animation we defined above */
  animation: 650ms ease-out 0s 1 fadeInBottom;	
	
}



.cssanimation, .cssanimation span {
    animation-duration: 1s;
    animation-fill-mode: both;
}

.cssanimation span { display: inline-block }

.fadeInBottom { animation-name: fadeInBottom }
@keyframes fadeInBottom {
  0% {
               opacity: 0;
               transform: translateY(15px);
            }
            100% {
               opacity: 1;
               transform: translateY(0);
            }
         }

/* ---- 320 ( + ) smaller smartphones ---- */
@media screen and (min-width: 20em){ /* 480px */
.image-container .after h1{
font-size: 0.65em; color: #ffffff; margin: 1vw; font-family: "brandon-grotesque";} 
.image-container .after p{
font-size: 0.5rem; color: #ffffff; text-align: center; margin: 1vw;}
}
	
/* ---- 480 ( + ) smartphones ---- */
@media screen and (min-width: 30em){ /* 480px */
.image-container .after h1{
font-size: 0.75em; color: #ffffff; margin: 1vw; font-family: "brandon-grotesque";} 
.image-container .after p{
font-size: 0.65rem; color: #ffffff; text-align: center; margin: 1vw;}
}

/* ---- 768 ( + ) ---- */
@media screen and (min-width: 48em){ /* 768px */
.image-container .after h1{
font-size: 0.85em; color: #ffffff; margin: 1vw; font-family: "brandon-grotesque";} 
.image-container .after p{
font-size: 0.75rem; color: #ffffff; text-align: center; margin: 1vw;}
}
/* ---- 960 ( + ) large desktop ---- */
@media screen and (min-width: 60em){ /* 960px */
.image-container .after h1{
font-size: 0.95em; color: #ffffff; margin: 1vw; font-family: "brandon-grotesque";} 
.image-container .after p{
font-size: 0.80rem; color: #ffffff; text-align: center; margin: 1vw;}
}




/* ==================================================================================
    POETRY ANALYSIS CIRCULAR MODEL
   ================================================================================== */

/***** Main Elements Structure *****/
.circles-container{
	position: relative;
	width:80%;
	height:80%;
	z-index: 99;
}

.circles-container a {
  color: white;
}

.main-circle-content{
	position: relative;
	border-radius: 50%;
	border-width: 0px;
	overflow: hidden;
	background-color: #000;
	left:5%;
	top: 5%;
	width: 100%;
	height:100%;
	padding:1%; 
	z-index: 10;
	opacity: 1;
	text-align: center;

}
.main-circle-content img{
	width: 100%;
	height:100%;
	border-width: 0px;
	border-radius: 50%;

}
.main-circle-content .caption{
	position: absolute;
	top: 0%; 
	left: 15%;
	right: 15%;
	width: 66%;
	color:#fff;
	font-size: 0.72em;
	border-radius: 10px;

}


.circle{
	position: absolute;
	left:5%;
	top: 5%;
	width: 89%;
	border-width: 0px;
	border-radius: 50%;
	text-align: center;
}

.min-circle{
	position: absolute;
	z-index: 999;
	border:1px solid #aeaeae;
	text-align: center;
	border-radius: 50%;
	border-style: solid;
	border-width: 1px;
	background-color: #efefef;
	overflow: hidden;
	font-size:10px;

}
.min-circle img{
	width: 100%;
	height: 100%;
}

.min-circle img:hover
{filter: sepia(0.6); transition: 0.3s;}

.min-circle .content-text{
	font-size: 0.8em;
}	

	
.main-circle-content .caption h1 {font-family: "brandon-grotesque"; color: #dd9719; margin-bottom: 0;}
.main-circle-content .caption p {text-align: center;}

/* ---- 320 ( + ) smaller smartphones ---- */
@media screen and (min-width: 20em){ /* 480px */
.main-circle-content .caption{
top: -20px; }
.circles-container {
	width:90%;
	height:90%;
}	}			
.main-circle-content .caption h1{
font-size: 0.65em;} 		
.main-circle-content .caption p{
font-size: 0.4rem;} 	
	
/* ---- 480 ( + ) smartphones ---- */
@media screen and (min-width: 30em){ /* 480px */
	.main-circle-content .caption{
top: -8px;} 
.min-circle .content-text{
	top: 5%;}
.circles-container {
	width:90%;
	height:90%;
}	}			
.main-circle-content .caption h1{
font-size: 0.6em;} 		
.main-circle-content .caption p{
font-size: 0.4rem;} 	
}

/* ---- 768 ( + ) ---- */
@media screen and (min-width: 48em){ /* 768px */	
	.main-circle-content .caption{
top: 0%;} 	
.main-circle-content .caption h1{
font-size: 0.75em;} 
.main-circle-content .caption p{
font-size: 0.6rem;
}}
/* ---- 960 ( + ) large desktop ---- */
@media screen and (min-width: 60em){ /* 960px */
	.main-circle-content .caption{
top: 2%;} 	
.main-circle-content .caption h1{
font-size: 1.2em;} 
.main-circle-content .caption p{
font-size: 0.85rem;}
}

@media only screen and (max-width: 750px) {
.fagligemal li{
	text-align: center;
	margin:0px auto;
	padding:0px;
}
.fagligemal ul{
	list-style-position: inside;
	margin:0px auto;
	padding: 0px;
}
}
/***** End Main Elements Structure *****/

/* ==================================================================================
    Path
   ================================================================================== */

.path {
  text-align: left;
  color: #7F7F7F;
  font-size: 0.7em;
  text-transform: uppercase; 
  font-family: "brandon-grotesque", sans-serif;
  	
}

/* ==================================================================================
    TOOLTIPS
   ================================================================================== */

.tooltips {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltips2 {
  position: relative;
  display: inline-block;
  cursor: pointer;
  font-weight: bold;
}

.playable
{
font-weight:normal;
}

.playable {
    cursor: pointer;
}

.tooltip-heading {
    display: inline-flex;
    margin-bottom: 10px;
    margin-top: 8px;
	text-align: left;
	
}

.subscript {
    text-align: center;
    color: #C5C5C5;
	font-size: 13px;
	margin: 0.5em;
	font-weight:normal;
	
    }


.tooltip-heading h3 {
        color: #dd9719;
    font-weight: bold;
    font-size: 14px;
	margin-top: -16px;
		padding-right: 2px;
	padding-left: 2px;
}

.sub-heading {
     margin-bottom: 7px;
    margin-top: -16px;
    text-align: center;
	 font-style: italic;
	padding: 0px, 2px, 0px, 2px;
	font-size: 14px;

}

.tooltips .tooltiptext {
  cursor: auto;
  visibility: hidden;
  width: 175px;
  background: rgba(0, 0, 0, 0.9);
  color: #fff; 
  border-radius: 6px;	
  padding: 3px 0;
  position: absolute;
  font-style: italic;	
  bottom: 100%;
  left: 0%;
  margin-left: -70px;
  margin-bottom: 2px;
  text-align: center;
	  z-index: 99;
  
  /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
  opacity: 0;
  transition: opacity 0.5s;
}

.tooltips:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
span.tooltiptext:after {
    content: '';
    position: absolute;
    left: 46%;
    top: 100%;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid rgba(0, 0, 0, 0.9);
    clear: both;
}


.tooltips:after {
    visibility: hidden;
}

.tooltips2 .tooltiptext {
  cursor: auto;
  visibility: hidden;
  width: 175px;
  background: rgba(0, 0, 0, 0.9);
  color: #fff; 
  border-radius: 6px;	
  padding: 3px 0;
  position: absolute;
  font-style: italic;	
  bottom: 100%;
  left: 0%;
  margin-left: -70px;
  margin-bottom: 2px;
  text-align: center;
	  z-index: 99;
  
  /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
  opacity: 0;
  transition: opacity 0.5s;
}

.tooltips2:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
span.tooltiptext:after {
    content: '';
    position: absolute;
    left: 46%;
    top: 100%;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid rgba(0, 0, 0, 0.9);
    clear: both;
}


.tooltips2:after {
    visibility: hidden;
}
.fas-0  {

        color: #0580FF;
}
.fas-1 {

    color: red;
}
.voices {
        text-align: left;
    margin-left: 22px;
	font-size: 13px;
	margin-bottom: -3px;
}
.voices:last-child {
        margin-bottom: 2px;
}
.voices i {
    cursor: pointer;
    font-size: 15px;
    margin-right: 10px;
	opacity: 0.8;
}

.voices i:hover{
  opacity: 0.9;
}

/* IMAGE TOOLTIPS  */

.image-tooltips {
  position: relative;
  display: inline-block;
  cursor: pointer;
  font-weight: bold;
  z-index: 99;	
}

.image-tooltip-heading {
        display: inline-flex;
    margin-top: 3px;

}

.image-tooltip-heading h3 {
    color: #dd9719;
    font-weight: bold;
    font-size: 14px;
	padding-right: 2px;
	padding-left: 2px;
}

.image-tooltips .image-tooltiptext {
  cursor: auto;
  visibility: hidden;
  width: 217px;
  background-color: rgba(0, 0, 0, 0.9);
  color: #fff;
  border-radius: 6px;
  padding: 5px 0;	
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 0;
  right: 0;
  margin-left: -75px;
  margin-bottom: 4px;
  text-align: center;
  
  /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
  opacity: 0;
  transition: opacity 0.5s;
}

.image-tooltips:hover .image-tooltiptext {
  visibility: visible;
  opacity: 1;
}
span.image-tooltiptext:after {
    content: '';
    position: absolute;
    left: 46%;
    top: 100%;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid rgba(0, 0, 0, 0.9);
    clear: both;
}
.image-tooltips:after {
    visibility: hidden;
}
.image-tooltiptext-content {
    padding: 10px;
    margin-top: -10px;

}
.image-tooltiptext-content img {
    height: 105px;
	filter:sepia(0.9);
	border-radius: 6px;
    object-fit: cover;
}
.image-tooltiptext-content p {
    font-size: 12px;
    font-weight: normal;
	margin-bottom: 0;
	margin-top: 0;
	padding-top: 4px;
}

.playable
{
font-weight:normal;
font-style: italic;
font-size: 13px;
}

/* ==================================================================================
    QUOTE THIS PAGE
   ================================================================================== */

#quotepagelink
{
	position: absolute;
	bottom: 14%;
	right: 5%;
	color: #fff;
    border-radius: 20px;
    text-decoration: none;
	font-size:20px;
	text-align: center;
	background-color: #000;
    display: block;
	width: 30px;
	height: 30px;
	filter: opacity(0.6);
}

#quotepagelink:hover
{ filter:opacity(1.0)}

@media (max-width:60em) {
  #quotepagelink {
    display: none;
  }  }

#quotepagelink2
{
	position: absolute;
	bottom: 10%;
	right: 5%;
	color: #fff;
    border-radius: 20px;
    text-decoration: none;
	font-size:20px;
	text-align: center;
	background-color: #000;
    display: block;
	width: 30px;
	height: 30px;
	filter: opacity(0.6);
}

#quotepagelink2:hover
{ filter:opacity(1.0)}

@media (max-width:60em) {
  #quotepagelink2 {
    display: none;
  }  }


/* ==================================================================================
    OVERLAY - HTML CODE 
   ================================================================================== */

                  #myImg10,#myImg2,#myImg3 {
                  cursor: pointer;
                  transition: 0.3s;
                  }

   #myImg12,#myImg13,#myImg14 {
                  cursor: pointer;
                  transition: 0.3s;
                  }

				  #myImg4 #myImg5 #myImg6 {
                  cursor: pointer;
                  transition: 0.3s; 	  	  
                  }

				  #myImg99 {cursor: pointer; }

  				  #myImg7 #myImg8 #myImg9 {
                  cursor: pointer;
                  transition: 0.3s;  	  	  
                  }
                  #myImg10:hover,#myImg2:hover,#myImg3:hover {filter: sepia(0.6);}			
    			  #myImg4:hover, #myImg5:hover, #myImg6:hover {filter: sepia(0.6); transition: 0.3s;  cursor: pointer;}
    			  #myImg7:hover, #myImg8:hover, #myImg9:hover {filter: sepia(0.6); transition: 0.3s;}
  			#myImg11:hover, #myImg12:hover, #myImg13:hover {filter: sepia(0.6); transition: 0.3s;}



                  /* The Modal (background) */
                  .modal {
                  display: none; /* Hidden by default */
                  position: fixed; /* Stay in place */
                  z-index: 999; /* Sit on top */
                  padding-top: 60px; /* Location of the box */
                  left: 0;
                  top: 0;
                  width: 100%; /* Full width */
 				  height: calc(100vh - 0px);
				  overflow-y: auto;  
                  background-color: rgb(0,0,0); /* Fallback color */
                  background-color: rgba(0,0,0,0.3); /* Black w/ opacity */
                  }

.modal a:hover {color: #dd971a; border-bottom: 0px solid #dd971a;} 

              /* The Modal (background) */
                  .modal99 {
                  display: none; /* Hidden by default */
                  position: fixed; /* Stay in place */
                  z-index: 999; /* Sit on top */
                  padding-top: 60px; /* Location of the box */
                  left: 0;
                  top: 0;
                  width: 100%; /* Full width */
 				  height: calc(100vh - 0px);
				  overflow-y: auto;  
                  background-color: rgb(0,0,0); /* Fallback color */
                  background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
                  }

.modal a:hover {color: #dd971a; border-bottom: 0px solid #dd971a;} 



         
                  /* Modal Content (image) */
                  .modal-content {
                  margin: auto;
                  display: block; 
                  z-index: 1;
                  }
                  /* Add Animation */
                  .modal-content{  
                  animation: fadeIn 0.5s;
  -webkit-animation: fadeIn 0.5s;
  -moz-animation: fadeIn 0.5s;
  -o-animation: fadeIn 0.5s;
  -ms-animation: fadeIn 0.5s;
}
@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-moz-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-o-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-ms-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}
               /* The Close Button */
                  .close {
                  position: absolute;
                  top: 63px;
                  right: 160px;
                  color: #f1f1f1;
                  font-size: 25px;
                  font-weight: normal;
                  background-color: black;
                  padding: 1px 10px;
			      z-index: 1002;
				  animation: fadeIn 0.5s;	  
                  }
                  .close:hover,
                  .close:focus {
                  color: #bbb;
                  text-decoration: none;
                  cursor: pointer;
                  }
                  #fade {
                  display: none;
                  position: fixed;
                  top: 0%;
                  left: 0%;
                  width: 100%;
                  height: 100%;
                  background-color: black;
                  z-index: 1001;
                  -moz-opacity: 0.8;
                  opacity: .80;
                  filter: alpha(opacity=80);
                  }
                  #light {
                  display: none;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  max-width: 600px;
                  max-height: 360px;
                  margin-left: -300px;
                  margin-top: -180px;
                  border: 2px solid #FFF;
                  background: #FFF;
                  z-index: 1002;
                  overflow: visible;
                  }
                  #boxclose {
                  float: right;
                  cursor: pointer;
                  color: #fff;
                  border: 1px solid #AEAEAE;
                  border-radius: 3px;
                  background: #222222;
                  font-size: 31px;
                  font-weight: bold;
                  display: inline-block;
                  line-height: 0px;
                  padding: 11px 3px;
                  position: absolute;
                  right: 2px;
                  top: 2px;
                  z-index: 1002;
                  opacity: 0.9;
                  }
                  .boxclose:before {
                  content: "×";
                  }
                  #fade:hover ~ #boxclose {
                  display:none;
                  }
                  .test:hover ~ .test2 {
                  display: none;
                  }

       /* The Video close Button */
                  .close_video {
                  position: absolute;
    			  top: 60px;
                  right: 113px;  
                  color: #f1f1f1;
                  font-size: 25px;
                  font-weight: normal;
                  background-color: black;
                  padding: 1px 10px;
			      z-index: 1002;
				  animation: fadeIn 0.5s;	  
                  }
                  .close_video:hover,
                  .close_video:focus {
                  color: #bbb;
                  text-decoration: none;
                  cursor: pointer;
                  }
                  #fade {
                  display: none;
                  position: fixed;
                  top: 0%;
                  left: 0%;
                  width: 100%;
                  height: 100%;
                  background-color: black;
                  z-index: 1001;
                  -moz-opacity: 0.8;
                  opacity: .80;
                  filter: alpha(opacity=80);
                  }
                  #light {
                  display: none;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  max-width: 600px;
                  max-height: 360px;
                  margin-left: -300px;
                  margin-top: -180px;
                  border: 2px solid #FFF;
                  background: #FFF;
                  z-index: 1002;
                  overflow: visible;
                  }
                  #boxclose_video {
                  float: right;
                  cursor: pointer;
                  color: #fff;
                  border: 1px solid #AEAEAE;
                  border-radius: 3px;
                  background: #222222;
                  font-size: 31px;
                  font-weight: bold;
                  display: inline-block;
                  line-height: 0px;
                  padding: 11px 3px;
                  position: absolute;
                  right: 2px;
                  top: 2px;
                  z-index: 1002;
                  opacity: 0.9;
                  }
                  .boxclose_video:before {
                  content: "×";
                  }
                  #fade:hover ~ #boxclose_video {
                  display:none;
                  }

  .container-overlay{
                  background-color: #ffffff;
                  max-width: 1250px;
                  margin: auto; 
                  padding: 20px;  
                  }

  .container-overlay2{
                  background-color: #000;
                  max-width: 1213px;
                  margin: auto; 
                  }

  #tv-frame{
                      position:absolute;
    z-index:999;
	  width: 1213px;
	  border: 2px solid black;
                  }

      .container-overlay2-sub{
                  }


                  .container-overlay-sub{
                  border: 2px solid black; 
                  padding: 5px;
                  padding-right: 40px;
                  padding-left: 40px; 
                  }
                  * {
                  box-sizing: border-box;
                  }                

                  /* Create two equal columns that floats next to each other */
                  .container-overlay .column {
                  float: left;
                  width: 46%;
                  padding: 10px; 
                  margin: 40px;
                  text-align: left;
                  padding-top: 0px; 
                  margin-top: 0px;
                  margin-bottom: 0px;
                  }
        
                  .container-overlay .row_modal{
                  content: "";
                  display: table;
                  clear: both;
                  text-align: center; 
				  font-family: "ff-meta-serif-web-pro", serif;	  
                  }
 
                  @media only screen and (max-width: 1500px){ 
                  .close {
                  position: absolute;
                  top: 80px;
                  right: 115px;  
                  }	 
                  }
                  @media only screen and (max-width: 1415px){ 
                  .close { 
                  right: 91px;  
                  }
				                 } 	  
                  @media only screen and (max-width: 1385px){ 
                  .close { 
                  right: 68px;  
                  } 
                  }
                  @media only screen and (max-width: 1340px){ 
                  .close { 
                  right: 58px;  
                  } 
                  }
                  @media only screen and (max-width: 1300px){ 
                  .close { 
                  right: 36px;  
                  } 
                  }
                  @media only screen and (max-width: 1270px){ 
                  .close { 
                  right: 29px;   
                  } 
                  }
                  @media only screen and (max-width: 1200px){ 
                  .close {
                  position: absolute;
                  top: 82px;
                  right: 21px; 
                  }
                  }	  
                  .container-overlay .column { 
                  width: 42%; 
                  }
                  /* 100% Image Width on Smaller Screens */
                  @media only screen and (max-width: 830px){ 
                  .close {
                  position: absolute;
                  top: 81px;
                  right: 21px; 
                  }
                  .container-overlay .column { 
                  width: 100%;
                  margin-left: 0px;
                  margin-top: 10px;   
                  }
                  }
                  /* 100% Image Width on Smaller Screens */
                  @media only screen and (max-width: 700px){
                  .modal-content {
                  width: 100%;
        
                 
                  }
                  .close {
                  position: absolute;
                  top: 80px;
                  right: 14px; 
                  }
                  }
                  /* 100% Image Width on Smaller Screens */
                  @media only screen and (max-width: 700px){
                  .container-overlay-sub{ 
                  padding: 0px;
                  }   
                  .container-overlay .column { 
                  text-align: justify;
                  margin-top: 20px;   
                  }
                  }

                @media only screen and (max-width: 1500px){ 
                  .close_video {
                  position: absolute;
                  top: 60px;
                  right: 113px;  
                  }	 
                  }
                  @media only screen and (max-width: 1415px){ 
                  .close_video { 
                  right: 89px;  
                  }
				                 } 	  
                  @media only screen and (max-width: 1385px){ 
                  .close_video { 
                  right: 85px;  
                  } 
                  }
                  @media only screen and (max-width: 1340px){ 
                  .close_video { 
                  right: 58px;  
                  } 
                  }
                  @media only screen and (max-width: 1300px){ 
                  .close_video { 
                  right: 26px;  
                  } 
                  }
                  @media only screen and (max-width: 1270px){ 
                  .close_video { 
                  right: 9px;   
                  } 
                  }
                  @media only screen and (max-width: 1200px){ 
                  .close_video {
                  position: absolute;
                  top: 60px;
                  right: 1px; 
                  }
                  }	  
         
                  /* 100% Image Width on Smaller Screens */
                  @media only screen and (max-width: 830px){ 
                  .close_video {
                  position: absolute;
                  top: 60px;
                  right: 1px; 
                  }
                  }
                  /* 100% Image Width on Smaller Screens */
                  @media only screen and (max-width: 700px){

                  .close_video {
                  position: absolute;
                  top: 60px;
                  right: 1px; 
                  }}
                  

@media only screen and (max-width: 600px) {
	
  .modal
  {
		
		width: 100%;
		min-width: 300px;
		overflow-x: hidden;
		padding: 7px;
		
		  position: absolute;
		  float: left;
		  left: 50%;
		  top: 45%;
		  transform: translate(-50%, -50%);
		  border: 4px solid #ccc;
		      height: calc(100vh - 100px);
  }
}

/* ==================================================================================
    HERO TOP & OVERLAY 
   ================================================================================== */

.big-image {
  height: 60vh;
  width: 100vw;
  position: relative;
  background-size: cover;
  background-position: 50% 50%;
}

.big-image video {
  object-fit: cover;
  width: 100vw;
  height: 40vh;
  position: relative;
  left: 0;
}

.big-image-no-border {
  height: 66vh;
  width: 100vw;
  position: relative;
  background-size: cover;
  background-position: 50% 50%;
  border: none; /* Add this line to remove any border */
}

.big-image-no-border video {
  object-fit: cover;
  width: 100vw;
  height: 46vh;
  position: relative;
  left: 0;
  border: none; /* Ensure no border on video element */
}

.hero-text {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  mix-blend-mode: screen;
  opacity: 0.65;
  background-image: url('../img/overlay.png');
  background-size: cover;
  color: white;
}

.hero-text_no_blend {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  mix-blend-mode: screen;
  opacity: 1;
  background-image: url('../img/overlay.png');
  background-size: cover;
  color: white;
}

.hero-text2 {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  mix-blend-mode: screen;
  opacity: 0.35;
  background-image: url('../img/overlay.png');
	  background-size: cover;
  color: black;
}


.hero-text3 {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  mix-blend-mode: screen;
  opacity: 0.25;
  background-image: url('../img/overlay.png');
	  background-size: cover;
  color: black;
}

.hero-text h1 {
  font-size: 2.5em;
  letter-spacing: 0px;
  margin: 0 0 5px;
}

.hero-text p {
  margin: 0;
	text-align: center;
  font-size: 1em;
	width: 50%;
}


.hero-text a {
  color: #E5E5E5;
}

.wrapper {
    overflow: hidden; 
    height: 100%;
	width: 100%;
	
}


.hero-dust {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  mix-blend-mode: soft-light;
  transform: translate3d(0,0,0);	
  opacity: 0.85;
  background-image: url('dust1.jpeg');
  background-size: cover;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.hero-dust2 {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  mix-blend-mode: soft-light; /* Ensure this is supported or has a fallback */
  transform: translate3d(0, 0, 0); /* Forces hardware acceleration */
  opacity: 1;
  background-image: url('dust1.jpeg');
  background-size: cover;
  background-position: center; /* Ensures proper alignment of the image */
  background-repeat: no-repeat; /* Prevents tiling if the image doesn't fill the space */
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

/* Fallback for browsers not supporting mix-blend-mode */
.hero-dust2.no-blend {
  background-color: rgba(0, 0, 0, 0.5); /* Optional: A fallback background color */
}


/* ==================================================================================
   BUTTON (SCRABBLE)
   ================================================================================== */
.text-box {
    margin-left: 44vw;
   margin-top: 42vh;
}

.btn:link,
.btn:visited {
    text-transform: uppercase;
    text-decoration: none;
    padding: 15px 40px;
    display: inline-block;
    border-radius: 100px;
    transition: all .2s;
    position: absolute;
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.btn:active {
    transform: translateY(-1px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.btn-white {
    background-color: #fff;
    color: #777;
}

.btn::after {
    content: "";
    display: inline-block;
    height: 100%;
    width: 100%;
    border-radius: 100px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: all .4s;
}

.btn-white::after {
    background-color: #fff;
}

.btn:hover::after {
    transform: scaleX(1.4) scaleY(1.6);
    opacity: 0;
}

.btn-animated {
    animation: moveInBottom 5s ease-out;
    animation-fill-mode: backwards;
}

@keyframes moveInBottom {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

/* ==================================================================================
   CARD-FLIP
   ================================================================================== */
*{
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

h1{
  font-size: 2.5rem;
  font-family: 'Montserrat';
  font-weight: normal;
  color: #444;
  text-align: center;
  margin: 2rem 0;
}

.wrappercards{
  width: 90%;
  margin: 0 auto;
  max-width: 80rem;
}

.cols{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.col{
  width: calc(25% - 2rem);
  margin: 1rem;
  cursor: pointer;
}

.containercards{
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
	-webkit-perspective: 1000px;
	        perspective: 1000px;
}

.front,
.back{
  background-size: cover;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.25);
  border-radius: 10px;
	background-position: center;
	-webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
	transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
	-o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
	transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
	transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
	-webkit-backface-visibility: hidden;
	        backface-visibility: hidden;
	text-align: center;
	min-height: 280px;
	height: auto;
	border-radius: 10px;
	color: #fff;
	font-size: 1rem;
}

.back{
  background: radial-gradient(ellipse at bottom, #994d00 0%, #030617 100%)

}
.front:after{
	position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    content: '';
    display: block;
    opacity: .6;
    background-color: #000;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    border-radius: 10px;
}
.containercards:hover .front,
.containercards:hover .back{
    -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.back{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.inner{
    -webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
            transform: translateY(-50%) translateZ(60px) scale(0.94);
    top: 50%;
    position: absolute;
    left: 0;
    width: 100%;
    padding: 2rem;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    outline: 1px solid transparent;
    -webkit-perspective: inherit;
            perspective: inherit;
    z-index: 2;
}

.containercards .back{
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

.containercards .front{
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

.containercards:hover .back{
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.containercards:hover .front{
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.front .inner p{
  font-size: 1.5rem;
  margin-bottom: 2rem;
  position: relative;
}

.front .inner p:after{
  content: '';
  width: 4rem;
  height: 2px;
  position: absolute;
  background: #C6D4DF;
  display: block;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: -.75rem;
}

.front .inner span{
  color: rgba(255,255,255,0.7);
  font-family: 'Montserrat';
  font-weight: 300;
}

@media screen and (max-width: 64rem){
  .col{
    width: calc(33.333333% - 2rem);
  }
}

@media screen and (max-width: 48rem){
  .col{
    width: calc(50% - 2rem);
  }
}

@media screen and (max-width: 32rem){
  .col{
    width: 100%;
    margin: 0 0 2rem 0;
  }
}

/* ==================================================================================
    BOARDGAME CODE
   ================================================================================== */
.boardgame {
  background-image: url("mediefagsspil1.png");
	background-position: center;
  height: 754px;
}

/* ==================================================================================
    ACCORDION CODE
   ================================================================================== */

.accordion {
  background-color: #101010;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: 0.5px solid #919191;
  text-align: left;
  outline: none;
  transition: 0.4s;
}

.active, .accordion:hover {
  opacity: 1;
}

button.accordion {
        background-color: #101010;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
}

.panel2 {
  display: none;
  background-color: white;
  overflow: hidden;	
  font-size: 0.9em;
  padding: 10px;
}

.panel3 {
  display: none;
  background-color: black;
  overflow: hidden;	
  font-size: 0.9em;
  padding: 10px;
  color: silver;
}

.panel3 a{
  color: silver;
}

.panel3 a:hover{
  color: #dd971a;
}

/* ==================================================================================
    NEWSPAPER
   ================================================================================== */
header_news {
 font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: 4em;
	text-align: center;
    text-transform: uppercase;
    display: inline-block;
    line-height: 42px;
  }

sub_heading {
 font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: 1.5em;
	text-align: center;
	font-style: italic;
    text-transform: uppercase;
    display: inline-block;
    line-height: 32px;
	margin-top: 0px;
  }

#heading {position: absolute;
	top: 30vw;
	right: 1vw;  
    width: 320px;
}


.newspaper{
    column-count: 2;
	height: auto;
  }
  
  .newspaper p:first-of-type:first-letter {
    font-size:5em;
    float: left;
    /*adjust the following properties at your own risk*/
    line-height: 50%;
    margin:0.3em 0.1em 0.1em -0.05em;
  }
  .newspaper img{
    width:100%;
  }
  
  .newspaper h2{
   column-span: all;
  }

newspaperheadline {
 font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: 6em;
    text-transform: uppercase;
    display: inline-block;
    line-height: 72px;
    margin-bottom: 20px;
  }

@media (max-width:40em) {
newspaperheadline{ 
    font-size: 5em;
  }
 }



/* ==================================================================================
    IFRAME
   ================================================================================== */
.googlepdf {
    position: relative;
    overflow: hidden;
}

.iframe-container {
  position: relative;
  overflow: hidden;
  width: 150%;
  height: 80vw;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

.iframe-container iframe {
   border: 0;
   height: 80vw;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}


/* ==================================================================================
    COMIC BOOK / GRAPHIC NOVEL
   ================================================================================== */
.comic {
  display:flex;
  flex-wrap:wrap;
  padding:1vmin;
}

.left {
    float:left;
}

p.test2 {
  writing-mode: vertical-rl; 
	line-height: 40%;
}

.panel {
  background-color:#fff;
  border:solid 8px #000;
  box-shadow:0 6px 6px -6px #000;
  display:inline-block;
  flex:1 1;
  height:200px;
  margin:1vmin;
  overflow:hidden;
  position:relative;
  opacity: 0.7;
}
.panel:hover {
opacity: 1.0;
   -webkit-transition: all .3s ease-in-out;  
}

.text {
  border:solid 2px #000;
  border-radius: 4em;
  margin:0;
  padding:3px 0px 5px 0px;
  background: #fff;
}

.top-left {
  left:-6px;
  position:absolute;
  top:-2px;
}

.punchline {
  position:absolute;
  top:0em;
	width: 105%;
}

.panelplace {
  bottom:2em;
  position:absolute;
  right:0.6em;
}

.blankspace {
  bottom:2em;
  position:absolute;
  right:1em;
}

.bottom-right {
  bottom:0em;
  position:absolute;
  right:1em;
}

.bottom-center {
  bottom:0em;
  position:absolute;
  left:25%;
  right:25%;
}

.bottom-left {
  bottom:0em;
  position:absolute;
  left:0%;
}


.speech {
  background-color:#fff;
  border:solid 2px #000;
  border-radius:12px;
  top: 3.5em;
  right: 9.5em;
  display:inline-block;
  margin:.5em;
  padding:.5em 1em;
  position: absolute;
}

.speech:before {
  border:solid 12px transparent;
  border-left:solid 12px #000;
  border-top:solid 12px #000;
  bottom:-24px;
  content:"";
  height:0;
  left:24px;
  position:absolute;
  transform:skew(-15deg);
  width:0;
}

.speech:after {
  border:solid 10px transparent;
  border-left:solid 10px #fff;
  border-top:solid 10px #fff;
  bottom:-19px;
  content:"";
  height:0;
  left:27px;
  position:absolute;
  transform:skew(-15deg);
  width:0;
}

.panel:nth-child(1) {
  flex-basis: 400px;
}
.panel:nth-child(2) {
  flex-basis: 200px;
}
.panel:nth-child(3) {
  flex-basis: 200px;
}
.panel:nth-child(4) {
  flex-basis: 200px;
}
.panel:nth-child(5) {
  flex-basis: 200px;
}
.panel:nth-child(6) {
  flex-basis: 200px;
}
.panel:nth-child(7) {
  flex-basis: 400px;
}
.panel:nth-child(8) {
  flex-basis: 200px;
}
.panel:nth-child(9) {
  flex-basis: 200px;
}

/* background colours */

.panel:nth-child(4n+1) {
  background-image:radial-gradient(circle, yellow, orange);
}

.panel:nth-child(4n+2) {
  background-image:radial-gradient(circle, lightblue, deepskyblue);
}

.panel:nth-child(4n+3) {
  background-image:radial-gradient(circle, palegreen, yellowgreen);
}

.panel:nth-child(4n+4) {
  background-image:radial-gradient(circle, lightcoral, tomato);
}

@media (max-width:480px) {
  .gutter {
      display: none;
  } }

/* ==================================================================================
    IMG COMPARISON
   ================================================================================== */

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

Primary style

-------------------------------- */
*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

img {
  max-width: 100%;
}

.cd-image-container {
  position: relative;
  width: 100%;
  max-width: 768px;
  margin: 0em auto;
}
.cd-image-container img {
  display: block;
	border: 1px solid black;
}

.cd-image-label {
  position: absolute;
  bottom: 0;
  right: 0;
  color: #ffffff;
  padding: 1em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  opacity: 0;
  -webkit-transform: translateY(20px);
  -moz-transform: translateY(20px);
  -ms-transform: translateY(20px);
  -o-transform: translateY(20px);
  transform: translateY(20px);
  -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0.3s 0.7s;
  -moz-transition: -moz-transform 0.3s 0.7s, opacity 0.3s 0.7s;
  transition: transform 0.3s 0.7s, opacity 0.3s 0.7s;
}
.cd-image-label.is-hidden {
  visibility: hidden;
}
.is-visible .cd-image-label {
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}

.cd-resize-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  overflow: hidden;
  /* Force Hardware Acceleration in WebKit */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.cd-resize-img img {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
}
.cd-resize-img .cd-image-label {
  right: auto;
  left: 0;
}
.is-visible .cd-resize-img {
  width: 50%;
  /* bounce in animation of the modified image */
  -webkit-animation: cd-bounce-in 0.7s;
  -moz-animation: cd-bounce-in 0.7s;
  animation: cd-bounce-in 0.7s;
}

@-webkit-keyframes cd-bounce-in {
  0% {
    width: 0;
  }
  60% {
    width: 55%;
  }
  100% {
    width: 50%;
  }
}
@-moz-keyframes cd-bounce-in {
  0% {
    width: 0;
  }
  60% {
    width: 55%;
  }
  100% {
    width: 50%;
  }
}
@keyframes cd-bounce-in {
  0% {
    width: 0;
  }
  60% {
    width: 55%;
  }
  100% {
    width: 50%;
  }
}
.cd-handle {
  position: absolute;
  height: 44px;
  width: 44px;
  /* center the element */
  left: 50%;
  top: 50%;
  margin-left: -22px;
  margin-top: -22px;
  border-radius: 50%;
  background: #222222 url("cd-arrows.svg") no-repeat center center;
  cursor: move;
  box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) scale(0);
  -moz-transform: translate3d(0, 0, 0) scale(0);
  -ms-transform: translate3d(0, 0, 0) scale(0);
  -o-transform: translate3d(0, 0, 0) scale(0);
  transform: translate3d(0, 0, 0) scale(0);
}
.cd-handle.draggable {
  /* change background color when element is active */
  background-color: #000000;
}
.is-visible .cd-handle {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  -moz-transform: translate3d(0, 0, 0) scale(1);
  -ms-transform: translate3d(0, 0, 0) scale(1);
  -o-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
  -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0s 0.7s;
  -moz-transition: -moz-transform 0.3s 0.7s, opacity 0s 0.7s;
  transition: transform 0.3s 0.7s, opacity 0s 0.7s;xg
}


/* ==================================================================================
    PERMANENT MARKER FONT
   ================================================================================== */

pm { font-family: "Permanent Marker"; font-size: 36px; font-style: normal; font-variant: normal; font-weight: 700; line-height: 40.4px; }
pm2 { font-family: "Permanent Marker"; color: white, 35px; font-style: normal; font-variant: normal; font-weight: 300; line-height: 40.4px;   text-shadow: 2px 2px #000000; }

pentagram { font-family: "ff-meta-serif-web-pro", serif;font-size: 17px; font-style: normal; font-variant: normal; font-weight: 500; line-height: 40.4px; }
/* ==================================================================================
    NOHOVER
   ================================================================================== */
.noHover{
    pointer-events: none;
}

/* ==================================================================================
    COLUMNS 
   ================================================================================== */

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  padding: 10px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* ==================================================================================
    LINE-THROUGH TOGGLE
   ================================================================================== */

.line-through{
     text-decoration: line-through;
}

/* ==================================================================================
    CAPTION VIDEO
   ================================================================================== */

#captionvideo {
	margin-top: -10px;
	font-size: 1em;
}

.caption {
	font-size: 0.8em;
	text-align: center;
	margin-top: 3px;
	color: #525252;
}

#captionvideo2 {
	margin-top: -1px;
	margin-left: 4px;
	font-size: 0.75em;
	text-align: center;
}

#captionvideo3 {
	margin-top: -1px;
	margin-left: 4px;
	font-size: 0.75em;
	text-align: right;
}

.captionvideo2 {
	margin-top: -1px;
	margin-left: 4px;
	font-size: 0.75em;
	text-align: center;
}
/* ==================================================================================
   GRID - .grid-wrapper determines relative column (c+) and spacing (s+) widths
   ================================================================================== */
   
/* ---- base (all) ---- */
.grid-wrapper {text-align: left;width: 100%;max-width: 74.063em !important; /* 1185px (1140px + 22.5px left & right column gutter padding) */margin: 0 auto;padding: 0 1.40625em;}
.row {width: 100%; margin: 0 auto;}
.row2 {width: 100%; margin: 0 auto;}
.row3 {width: 100%; margin: 0 auto; height: 400px;}
.row .row {width: auto; margin: 0 auto;}
.row:before,.row:after,.clearfix:before,.clearfix:after {content:'';display:table;}
.row:after,.clearfix:after {clear:both;}
.row,.clearfix {zoom:1;}
.center {text-align: center;}
.left {text-align: left;}
.full-top {margin-top: 2.8125em; /* 45px */}
.full-btm {margin-bottom: 2.8125em; /* 45px */}
.half-top {margin-top: 1.40625em /* 22.5px */}
.half-btm {margin-bottom: 1.40625em /* 22.5px */}
.quarter-top {margin-top: 0.703125em /* 11.25px */}
.quarter-btm {margin-bottom: 0.703125em /* 11p.25px */}
.no-top {margin-top: 0em;}
.no-btm {margin-bottom: 0em;}
.neg-top {margin-top: -2em;}
.neg-btm {margin-bottom: -2.5em;}
.smallquarter-top {margin-top: 0.3515em /* 5.625px */}
.smallquarter-btm {margin-bottom: 0.3515em /* 5.625px */}
.evenless-btm {margin-bottom: -1em /* 5.625px */}


img {width: 100%; height: auto; display: block; margin: 0 auto;}
.c1,.c3,.c3-thumbs,.c3-thumbs2,.c4,.c5,.c6,.c7,.c8,.c9,.c10,.c11,.c12, .newcontent {width: 100%;margin-right: auto;margin-left: auto;margin-bottom: 1.40625em; display: flow-root;}
.c2 {width: 100%;margin-right: auto;margin-left: auto;margin-bottom: 1.40625em;}
.ls1,.ls2,.ls3,.ls4,.ls5,.ls6,.ls7,.ls8,.ls9,.ls10,.ls11 {width: 100%;margin-right: auto;margin-left: auto;margin-bottom: 1.40625em}
.rs1,.rs2,.rs3,.rs4,.rs5,.rs6,.rs7,.rs8,.rs9,.rs10,.rs11 {width: 100%;margin-right: auto;margin-left: auto;margin-bottom: 1.40625em}
.end {float:right;} /* Adding the "end" class isn't a must though it does create a smooth right alignment edge to the row */
/* ---- 320 ( + ) smartphones ---- */
@media screen and (min-width: 20em){ /* 320px & Editted by Sowkat */
.c3-thumbs_new {width: 33%; margin: 0 auto; float: left; position: relative; padding: 0 1.40625em 2.8125em 1.40625em; /* 22.5px (half gutter) */} /* for thumbnails */
.c3-thumbs {width: 33%; margin: 0 auto; float: left; position: relative; padding: 0 1.40625em 2.8125em 1.40625em; /* 22.5px (half gutter) */} /* for thumbnails */
.c3-thumbs2 {width: 50%; margin: 0 auto; float: left; position: relative; padding: 0 1.40625em 2.8125em 1.40625em; /* 22.5px (half gutter) */} /* for thumbnails */	
.c6-no-padding {width: 50%; margin-left: auto;
  margin-right: auto; padding-bottom: 1em; position: relative;} 
.mobile-hide {display: none;}
/* for editing heading */
#editing {display: block; clear: both;}
#lighting {display: block; clear: both;}
#angles {display: block; clear: both;}
#lines {display: block; clear: both;}	
}
/* ---- 480 ( + ) smartphones ---- */
@media screen and (min-width: 30em){ /* 480px */
.mobile-hide {display: inline;}
.c6-no-padding {width: 50%; margin-left: auto;
  margin-right: auto; padding-bottom: 1em;} 	
}
/* ---- 481 ( + ) ---- */ 
@media screen and (min-width: 30.0625em){ /* 481px */ 
.half-width {width:50%; float: left;padding: 1.40625em/*0.703125em; /* 11.25px (quarter gutter) */;position: relative; margin: 0 auto; }
.row .row .half-width {width: 100%; margin-bottom: 0.703125em;}
}
/* ---- 600 ( + ) ---- */
@media screen and (min-width: 37.5em){ /* 600px & Editted by Sowkat */
.c3-thumbs_new {width: 33%; margin: 0 auto; float: left; position: relative;} /* for thumbnails */
.c3-thumbs {width: 50%; margin: 0 auto; float: left; position: relative;} /* for thumbnails */
.c3-thumbs2 {width: 50%; margin: 0 auto; float: left; position: relative;} /* for thumbnails */	
.c6-no-padding {width: 50%; height: auto; margin-left: auto;
  margin-right: auto; padding-bottom: 1em;} 	
.newcontent {width: 50%; margin: 0 auto; float: left; position: relative;} /* for thumbnails */
/* for editing heading */
#editing {display: block; clear: both;}
}
/* ---- 768 ( + ) ---- */
@media screen and (min-width: 48em){ /* 768px */
.grid-wrapper {text-align: left;padding: 0 2.8125em;}
.c3-thumbs {width: 33%; height: auto; padding-bottom: 2.8125em !important;} /* for thumbnails */
.c3-thumbs2 {width: 33%; height: auto; padding-bottom: 2.8125em !important;} /* for thumbnails */	
.c6-no-padding {width: 50%; position: relative; margin-left: auto;
  margin-right: auto; padding-bottom: 0em;} 	
.newcontent {width: 33.33%; padding-bottom: 2.8125em !important;} /* for thumbnails */
}
/* ---- 960 ( + ) large desktop ---- */
@media screen and (min-width: 60em){ /* 960px */
.grid-wrapper {text-align: left;padding: 0 2.8125em;}
.row .row {width: auto; margin: 0 -1.40625em /* -22.5px */;}
.full-top {margin-top: 5.625em; /* 90px */}
.full-btm {margin-bottom: 5.625em; /* 90px */}
.half-top {margin-top: 1.8125em; /* 45px */}
.half-btm {margin-bottom: 2.8125em; /* 45px */}
.quarter-top {margin-top: 1.40625em /* 22.5px */}
.quarter-btm {margin-bottom: 1.40625em /* 22.5px */}
.no-top {margin-top: 0;}
.neg-btm {margin-bottom: 5em;}
.c1 {width:8.33%}
.c2 {width:16.66%}
.c3 {width:25%}
.c3-thumbs {width: 33%;}
.c3-thumbs2 {width: 33%;}	
.c4 {width:33.33%}
.c5 {width:41.66%}
.c6 {width:50%}
.c6-no-padding {width:50%; float: left; height: auto; filter: grayscale(1); 	-webkit-transition: .4s ease-in-out opacity;
    -moz-transition: .4s ease-in-out opacity;
    -o-transition: .4s ease-in-out opacity;
    transition: .4s ease-in-out opacity;}	.c6-no-padding:hover {filter: grayscale(0); 	-webkit-transition: .4s ease-in-out opacity;
    -moz-transition: .4s ease-in-out opacity;
    -o-transition: .4s ease-in-out opacity;
    transition: .4s ease-in-out opacity;} 	
.c7 {width:58.33%}
.c8 {width:66.66%}
.c9 {width:75% }
.c9-center {width:75%; margin-left: 12.5%; margin-right: 12.5%;}
.c10 {width:83.33%}
.c11 {width:91.66%}
.c12 {width:100%}
.newcontent {width: 33.33%;}
.c1,.c2,.c3,.c3-thumbs,.c4,.c5,.c6,.c7,.c8,.c9,.c10,.c11,.c12, .newcontent {float: left;padding: 0 1.40625em; /* 22.5px (half gutter) */;position: relative; margin: 0 auto; }
.row .row .c1,.row .row .c2,.row .row .c3,.row .row .c3-thumbs,.row .row .c4,.row .row .c5,.row .row .c6,.row .row .c7,.row .row .c8,.row .row .c9,.row .row .c10,.row .row .c11,.row .row .c12 .newcontent {width: 100%; margin-bottom: 2.8125em;}
.row .row > div:last-child{margin-bottom:0 !important}
.ls1 {margin-left:8.33%}
.ls2 {margin-left:16.66%}
.ls3 {margin-left:25%}
.ls4 {margin-left:33.33%}
.ls5 {margin-left:41.66%}
.ls6 {margin-left:50%}
.ls7 {margin-left:58.33%}
.ls8 {margin-left:66.66%}
.ls9 {margin-left:75%}
.ls10 {margin-left:83.33%}
.ls11 {margin-left:91.66%}
.rs1 {margin-right:8.33%}
.rs2 {margin-right:16.66%}
.rs3 {margin-right:25%}
.rs4 {margin-right:33.33%}
.rs5 {margin-right:41.66%}
.rs6 {margin-right:50%}
.rs7 {margin-right:58.33%}
.rs8 {margin-right:66.66%}
.rs9 {margin-right:75%}
.rs10 {margin-right:83.33%}
.rs11 {margin-right:91.66%}
}

@media screen and (max-width: 800px) {
    .newcontent {
      display:none
    }
}

/* ==================================================================================
   BORDER 
   ================================================================================== */ 

.border { border-width: 1px; border-color: black; border-style: solid; }

.border-grammar-exercise { border: 1px solid rgb(0, 0, 0, 0.1); background-image: url("../css/dictionarybg-lysere.png")}

.break {display:block; margin-top:10px; line-height:22px; }

/* ==================================================================================
   BORDER DOWN / UP
   ================================================================================== */ 

borderdown {
  position: absolute;  }

.borderup {
	position: absolute;
	bottom: -3px;
	width: 100%;
	z-index: 98;
}

/* ==================================================================================
   HR
   ================================================================================== */ 



/* ==================================================================================
   MODEL ANALYSIS 
   ================================================================================== */ 

m1{font-family: "brandon-grotesque",sans-serif;
    font-style: normal;
    font-weight: 800;
	color: white;
    font-size: 1.4vw;
    text-transform: uppercase;
	letter-spacing: 4px;
	display: block;
	}

m2 {
 text-shadow: 0px 2px 2px rgba(36, 36, 36, 1);
	font-family: "brandon-grotesque",sans-serif;
    font-style: normal;
    font-weight: 800;
	color: white;
    font-size: 1.4em;
    text-transform: uppercase;
	letter-spacing: 4px;
	display: block;
}

/* ==================================================================================
   IMAGES TASKS 
   ================================================================================== */ 

.imagestasks {}

#taskstopright {border-top: 1px solid black;
border-right: 1px solid black;}

#taskstopleft {border-top: 1px solid black;
border-left: 1px solid black;}

#tasksdownright {border-bottom: 1px solid black;
border-right: 1px solid black;}

#tasksdownleft {border-bottom: 1px solid black;
border-left: 1px solid black;}

#oneimage {border: 1px solid black;}

#oneimagenoborder {}
/* ======================================
============================================
   VIDEO / AUDIO 
   ================================================================================== */ 
video {
  /* override other styles to make responsive */
  width: 100%    !important;
  height: 100%  !important;
  border: 1px solid black;
	padding-bottom:0;
}

audio {
  /* override other styles to make responsive */
  width: 100%    !important;
	height: 2em;
	position: relative;
  background-color: #F3F3F3;
	border-top: none;
	border: 1px solid rgb(0, 0, 0, 0.2);
	padding-bottom:0;
}

/* ==================================================================================
   PERCENTAGES
   ================================================================================== */
   
.zero {width: 0;}
.ten {width: 10%;}
.twenty {width: 20%;}
.thirty {width: 30%;}
.forty {width: 40%;}
.fifty {width: 50%;}
.sixty {width: 60%;}
.seventy {width: 70%;}
.eighty {width: 80%;}
.ninety {width: 90%;}
.hundred {width: 100%;}

/* ==================================================================================
   LINE-THROUGH
   ================================================================================== */

.line-through{
     text-decoration: line-through;
}

/* ==================================================================================
   TYPE
   ================================================================================== */
/*
 * Fonts Used:
 * Brandon Grotesque
 * Meta Serif Web Pro
*/

/* ---- base (all) ---- */
.white {color: #ffffff;}
.gold {color: #dd971a;}
#fit1spacing {margin-top: 8%;} /* for large fittext1 with no paragraph text on large billboard CAROUSEL */
#fit2spacing {margin-top: 0;} /* for all fittext2 usage */
h1, h3, h9 {
    font-family: "brandon-grotesque",sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 1em;
    text-transform: uppercase;
	letter-spacing: 4px;
	display: block;
	line-height: 1.4;
}
h1 {text-align: center;}

h10 {
    font-family: "brandon-grotesque",sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 1em;
    text-transform: uppercase;
	letter-spacing: 4px;
	display: block;
	line-height: 1.4;
	margin-bottom: 0px;
}
h10 {text-align: center;}

text_404 {
    font-family: "brandon-grotesque",sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 7.5em;
	margin-bottom: -30px;
    text-transform: uppercase;
	letter-spacing: 4px;
	display: block;
}
text_404 {text-align: center;}

h3 {margin-bottom: -.35em; text-align: center;}
h2 {
    font-family: "ff-meta-serif-web-pro", serif;
	font-style: italic;
    font-weight: 500;
    font-size: 1em;
    color: #dd971a;
    line-height: 1.6;
    text-align: center;
}
h2 a {text-decoration: none; color: #dd971a }
h4 {
    font-family: "brandon-grotesque",sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 1.5em;
    text-transform: uppercase;
	letter-spacing: 1px;
	display: block;
	line-height: 2;
	text-align: left;
}

h6 {
    font-family: "brandon-grotesque",sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 1em;
    text-transform: uppercase;
	letter-spacing: 4px;
	display: block;
	line-height: 1.4;
	margin-top: 1em;
    padding-top: 0.9em !important} 



	
	h6 {margin-bottom: .35em; text-align: left;}

h7 {
    font-family: "brandon-grotesque",sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 0.95em;
    text-transform: uppercase;
	letter-spacing: 4px;
	display: block;
	line-height: 1.4;}


h8 {margin-left: 1em;}
	
	h7 {margin-bottom: -1.5em; padding: 1em; text-align: center; margin-top: -1em;}

@media(max-width: 960px) {
  h6 {text-align: center;}
	
	
}
h5 {margin-bottom: 0.500em; text-align: left;
font-family: "brandon-grotesque",sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 1.1em;
    text-transform: uppercase;
	letter-spacing: 4px;
	display: block;
	line-height: 1.4;
}

figcaption {font-size: 0.7em;}

h4.modal {text-align: center; line-height: 1em;}
span.italic {
    font-family: "ff-meta-serif-web-pro", serif;
	font-style: italic;
	font-size: 0.875em;
	text-transform: none;
	letter-spacing: 3px;
	text-align: center;
}
p {text-align: center;}
p a {
    font-weight: bold; 
    font-style: normal; 
    color: #222222;
   outline: 0;
    text-decoration: none;
    border-bottom: 0px solid  #222222;
    padding: 0 0 .085em 0; /* for underline */
    -webkit-font-smoothing: antialiased;
    -webkit-backface-visibility: hidden; /*prevents safari flicker*/
    -webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;
}
p a:hover {color: #dd971a; border-bottom: 0px solid #dd971a;}
p a.no-underline {border-bottom: none;}

.forlob li {float: center;}	

sup {
  font-weight: 500; 
  font-size: 10px;
}

/* ---- 320 ( + ) smaller smartphones ---- */
@media screen and (min-width: 20em){ /* 480px */
h5 {text-align: center;}
h1 {font-size: 1.2em /* 20px */;letter-spacing: 5px; text-align: center;}
h10 {font-size: 1.2em /* 20px */;letter-spacing: 5px; text-align: center;}	
.path {text-align: center;}	
.source-top {text-align: center;
	 color: #7F7F7F;
  font-size: 0.55em;
  text-transform: uppercase; 
  font-family: "brandon-grotesque", sans-serif;
  margin: 0;
  padding: 0;
 
}	
	
}
	
/* ---- 480 ( + ) smartphones ---- */
@media screen and (min-width: 30em){ /* 480px */
h5 {text-align: center;}
h1 {font-size: 1.2em /* 20px */;letter-spacing: 5px; text-align: center;}
h10 {font-size: 1.2em /* 20px */;letter-spacing: 5px; text-align: center;}	
.path {text-align: center;}		
.source-top {text-align: center;
	 color: #7F7F7F;
  font-size: 0.65em;
  text-transform: uppercase; 
  font-family: "brandon-grotesque", sans-serif;
	  margin: 0;
  padding: 0;
	
}			
}

/* ---- 768 ( + ) ---- */
@media only screen and (max-width: 767px) {

  .responsive-text {

    text-align: center !important;

  }

}

@media screen and (min-width: 48em){ /* 768px */
h1 {font-size: 1.2em /* 20px */;letter-spacing: 5px; text-align: center;}	
h10 {font-size: 1.2em /* 20px */;letter-spacing: 5px; text-align: center;}	
h2 {font-size: 1.0625em; text-align: left;}
h5 {text-align: center;}
span.italic {font-size: 1em /* 18px */;}
p {text-align: left;}
.forlob li {float: left;}	
.path {text-align: left;}
.source-top {
  text-align: right;
  position: absolute;
  right: 2em;
  color: #7F7F7F;
  font-size: 0.7em;
  text-transform: uppercase; 
  font-family: "brandon-grotesque", sans-serif;
   margin: 0;
    padding: 0;
  	
}	
}
/* ---- 960 ( + ) large desktop ---- */
@media screen and (min-width: 60em){ /* 960px */
h1, h2, h3, h10 {text-align: center;}
h3 {margin-bottom: .5em;}
h5 {text-align: left;}
.text-left {text-align: left;}
.path {text-align: left;}	
.source-top {
  text-align: right;
  position: absolute;
  right: 2em;
  color: #7F7F7F;
  font-size: 0.7em;
  text-transform: uppercase; 
  font-family: "brandon-grotesque", sans-serif;
   margin: 0;
    padding: 0;
  	
}	
}

mark1 {
  background-color: rgba(0, 191, 255, .1)    /*  10% opaque green */ ;
  color: black;
	   
	
	-webkit-transition: .4s ease-in-out opacity;
    -moz-transition: .4s ease-in-out opacity;
    -o-transition: .4s ease-in-out opacity;
    transition: .4s ease-in-out opacity;
}

mark1:hover {
  background-color: rgba(0, 191, 255, .4)    /*  40% opaque green */ ;
  transition: 0.5s ease-in-out;
}

mark2 {
  background-color: rgba(0, 191, 255, .1)    /*  10% opaque green */ ;
  color: black;
	 border-radius: 10px;
	   
	
	-webkit-transition: .4s ease-in-out opacity;
    -moz-transition: .4s ease-in-out opacity;
    -o-transition: .4s ease-in-out opacity;
    transition: .4s ease-in-out opacity;
}

mark2:hover {
  background-color: rgba(0, 191, 255, .4)    /*  40% opaque green */ ;
  transition: 0.5s ease-in-out;
	 border-radius: 10px;
}

.glow {
  color: #black;
  text-align: center;
  -webkit-animation: glow 1s ease-in-out infinite alternate;
  -moz-animation: glow 1s ease-in-out infinite alternate;
  animation: glow 1s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 1px #fff, 0 0 4px rgb(230, 247, 255), 0 0 2px rgb(230, 247, 255), 0 0 3px rgb(230, 247, 255), 0 0 4px rgb(230, 247, 255), 0 0 5px rgb(230, 247, 255), 0 0 6px rgb(230, 247, 255);
  }
  
  to {
    text-shadow: 0 0 1px #fff, 0 0 2px rgb(81, 147, 206, 0.4), 0 0 3px rgb(81, 147, 206, 0.4), 0 0 1px rgb(81, 147, 206, 0.4), 0 0 2px rgb(81, 147, 206, 0.4), 0 0 3px rgb(81, 147, 206, 0.4), 0 0 1px rgb(81, 147, 206, 0.3);
  }
}

/* ==================================================================================
   ICONS
   ================================================================================== */
   
/*icomoon*/
@font-face {
	font-family: 'icomoon';
	src:url('../fonts/icomoon/icomoon.eot');
	src:url('../fonts/icomoon/icomoon-.eot#iefix') format('embedded-opentype'),
		url('../fonts/icomoon/icomoon.woff') format('woff'),
		url('../fonts/icomoon/icomoon.ttf') format('truetype'),
		url('../fonts/icomoon/icomoon.svg#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}
/* GLYPH */
/* Use the following CSS code if you want to use data attributes for inserting your icons */
.glyph {margin-bottom: -1.2em;}
[data-icon]:before {
    color: #dd971a;
	font-family: 'icomoon';
	font-size: 1.75em;
	content: attr(data-icon);
	speak: none;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale; }
	
	@media screen and (max-width: 1000px) {
    .thumbs2 {
      display:none
    }
	
	
}
/* icomoon data-icon key */
/*
mail - 
location - 
stack - 
map open - 
map - 
map2 - 
phone - 
signup - 
file - 
newspaper - 
link - 
search - 
paperclip - 
*/

/* ICON */
/* Use the following CSS code if you want to have a class per icon */
/*
Instead of a list of all class selectors,
you can use the generic selector below, but it's slower:
[class*="icon-"] {
*/
.icon-stack, .icon-location, .icon-map, .icon-map-2, .icon-phone, .icon-tag, .icon-download, .icon-search, .icon-zoom-in, .icon-signup, .icon-link, .icon-flag, .icon-attachment, .icon-file, .icon-envelope, .icon-location-2, .icon-newspaper, .icon-arrow-up-right, .icon-arrow-up-left {
	font-family: 'icomoon';
	font-size: 1.25em;
	text-decoration: none;
	border-bottom: none;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;
}
a.icon-envelope, a.icon-map-2, a.icon-file {padding: 0 .5em 0 .5em;font-size: 1.2em;text-deocration: none;color: #000000;-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;}
a:hover.icon-envelope, a:hover.icon-map-2, a:hover.icon-file {color: /*#aaaaaa;*/#dd971a;}

.icon-stack:before {content: "\e000";}
.icon-location:before {content: "\e001";}
.icon-map:before {content: "\e002";}
.icon-map-2:before {content: "\e003";}
.icon-phone:before {content: "\e004";}
.icon-tag:before {content: "\e005";}
.icon-download:before {content: "\e006";}
.icon-search:before {content: "\e007";}
.icon-zoom-in:before {content: "\e008";}
.icon-signup:before {content: "\e009";}
.icon-link:before {content: "\e00a";}
.icon-flag:before {content: "\e00b";}
.icon-attachment:before {content: "\e00c";}
.icon-file:before {content: "\e00d";}
.icon-envelope:before {content: "\e00e";}
.icon-location-2:before {content: "\e00f";}
.icon-newspaper:before {content: "\e010";}
.icon-arrow-up-right:before {content: "\e011";}
.icon-arrow-up-left:before {content: "\e012";}

/* ==================================================================================
   TABLES
   ================================================================================== */
#customers3 {
  font-family: "ff-meta-serif-web-pro", serif;
  font-size: 0.8em;
  border-collapse: collapse;
  width: 100%;
}

#customers3 td, #customers th {
  border: 1px solid #ddd;
  padding: 4px;
}

#customers3 tr:nth-child(even){background-color: #f2f2f2;}

#customers3 tr:hover {background-color: #ddd;   -webkit-transition: background-color 2s ease-out;
  -moz-transition: background-color 1s ease-out;
  -o-transition: background-color 1s ease-out;
  transition: background-color 1s ease-out;}

#customers3 th {
  padding-top: 4px;
  padding-bottom: 4px;
  text-align: left;
  background-image: url("dictionarybg.png");
  color: #000000;
}


#customers {
  font-family: "ff-meta-serif-web-pro", serif;
  font-size: 0.8em;
  border-collapse: collapse;
  width: 100%;
}

.rhetoricaldevices_div {
	position: relative;
	right: 20%;
	left: 20%;
	width: 60%;
	text-align: left;
}

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 4px;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;   -webkit-transition: background-color 2s ease-out;
  -moz-transition: background-color 1s ease-out;
  -o-transition: background-color 1s ease-out;
  transition: background-color 1s ease-out;}

#customers th {
  padding-top: 4px;
  padding-bottom: 4px;
  text-align: left;
  background-image: url("dictionarybg.png");
  color: #000000;
}

#customers2 {
text-align: center;}

#gollum {height: 60%; width: 60%; display: block;
  margin-left: auto; margin-right: -10em; margin-bottom: -3em; z-index: -999;}

#customers_exam {
  font-family: "ff-meta-serif-web-pro", serif;
  font-size: 0.8em;
  border-collapse: collapse;
  width: 100%;
}

.rhetoricaldevices_div {
	position: relative;
	right: 20%;
	left: 20%;
	width: 60%;
	text-align: left;
}

#customers_exam td, #customers_exam th {
  border: 1px solid #C1C1C1;
  padding: 4px;
  width: 25%;
}

#customers_exam tr:nth-child(even){background-color: #f2f2f2;}

#customers_exam tr:hover {background-color: #ddd;   -webkit-transition: background-color 2s ease-out;
  -moz-transition: background-color 1s ease-out;
  -o-transition: background-color 1s ease-out;
  transition: background-color 1s ease-out;}

#customers_exam th {
  padding-top: 4px;
  padding-bottom: 4px;
  text-align: left;
  background-image: url("dictionarybg.png");
  color: #000000;
}

/* ==================================================================================
   BUTTON(s)
   ================================================================================== */
/* ---- base (all) ---- */ 
.btn {
	border: none;
	font-family: "brandon-grotesque",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 0.68em;
    text-transform: uppercase;
	letter-spacing: 1px;
	color: inherit;
	background: none;
	padding: 0.625em 2.8125em;
	margin: 1em;
	display: inline-block;
	outline: none;
	position: relative;
	-webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;
	-webkit-border-radius: 12px;-moz-border-radius: 12px;-ms-border-radius: 12px;-o-border-radius: 12px;border-radius: 12px;
}
.btn:after {
	content: '';
	position: absolute;
	z-index: -1;
	-webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;
}
/* ---- 768 ( + ) ---- */
@media screen and (min-width: 48em){ /* 768px */
.btn {
    font-size: 1em;
    padding: 0.625em 2.1875em;
	margin: 2em 2em;
}
}
/* BUTTON 1 (carousel CTA)
   ======================== */ 
.btn-1 {
    color: #ffffff;
	background: #683926;
	border: 1px solid #683926;
	text-decoration: none;
	-webkit-animation-duration: 1s;-moz-animation-duration: 1s;-ms-animation-duration: 1s;-o-animation-duration: 1s;animation-duration: 1s;
    -webkit-animation-delay: 1s;-moz-animation-delay: 1s;-ms-animation-delay: 1s;-o-animation-delay: 1s;animation-delay: 1s;
}
.btn-1:hover {
	border: 1px solid #fff;
	color: #fff;
	background: none;
}
.btn-1-alt {
    border: 1px solid #fff;
	color: #fff;
	background: none;
	text-decoration: none;
	-webkit-animation-duration: 1s;-moz-animation-duration: 1s;-ms-animation-duration: 1s;-o-animation-duration: 1s;animation-duration: 1s;
    -webkit-animation-delay: 1s;-moz-animation-delay: 1s;-ms-animation-delay: 1s;-o-animation-delay: 1s;animation-delay: 1s;
}
.btn-1-alt:hover {
	border: 1px solid #683926;
	color: #ffffff;
	background: #683926;
}
/* ---- 768 ( + ) ---- */
@media screen and (min-width: 48em){ /* 768px */
.btn-1, .btn-1-alt {-webkit-animation-delay: 1.5s;-moz-animation-delay: 1.5s;-ms-animation-delay: 1.5s;-o-animation-delay: 1.5s;animation-delay: 1.5s;}
}
/* BUTTON 2 & (3 - paris)
   ======================== */ 
.btn-2, .btn-3 {
    border: 1px solid #fff;
	color: #fff;
	background: none;
	text-decoration: none;
    -webkit-animation-duration: 1s;-moz-animation-duration: 1s;-ms-animation-duration: 1s;-o-animation-duration: 1s;animation-duration: 1s;
    -webkit-animation-delay: 0s;-moz-animation-delay: 0s;-ms-animation-delay: 0s;-o-animation-delay: 0s;animation-delay: 0s;
}
.btn-2:hover {
    border: 1px solid #683926;
	color: #ffffff;
	background: #683926;
}
.btn-3:hover {
    border: 1px solid #222222;
	color: #ffffff;
	background: #222222;
}
/* ---- 960 ( + ) large desktop ---- */
@media screen and (min-width: 60em){ /* 960px */
.btn-2, .btn-3 {-webkit-animation-delay: .5s;-moz-animation-delay: .5s;-ms-animation-delay: .5s;-o-animation-delay: .5s;animation-delay: .5s;}
}
/* BUTTON 4
   ======================== */ 
.btn-4 {
    color: #ffffff;
	background: #683926;
	border: 1px solid #683926;
	text-decoration: none;
	margin: 0;
	margin-top: 1em;
}
.btn-4:hover {
	border: 1px solid #22222;
	color: #fff;
	background: #222222;
}
/* ---- 480 ( + ) smartphones ---- */
@media screen and (min-width: 30em){ /* 480px */
}


/* ================================================================================
   HEADER
   ================================================================================ */

/* ---- base (all) ---- */   
.header {background: #222222 ;margin: 0 auto;}

/* LOGO
   ======================== */
/* ---- base (all) ---- */  
.logo {
    background-size: 100% 100%;
    width: 1.6em; /* 40px */
    height: 1.6em; /* 40px */
    display: block;
	top: 0.5em;
    position: absolute;
	right: 1.5em;
}

/* ---- 721 ( + ) ---- */ 
/* ---- 721 ( + ) ---- */
@media screen and (max-width: 60.0625em){ /* 721px */
  .logo {
    display: none;
  }
  .socialmediamorsoe {
    display: none;
  }
  .morsoe {
    display: flex; /* Use flexbox for centering */
    justify-content: center; /* Center the child element horizontally */
    align-items: center; /* Center the child element vertically, if needed */
    text-align: center; /* Fallback for inline content */
  }
  .logo-img {
    display: block; /* Ensure it's treated as a block element */
	margin-left: 0em;
	margin-right: 8em;
  }
}
/* ---- 721 ( + ) ---- */ 
@media screen and (min-width: 45.0625em){ /* 721px */ 
.logo {width: 1.5em; /* 40px */height: 1.5em; /* 40px */float: none;}
}
/* ---- 1024 ( + ) ---- */ 
@media screen and (min-width: 64em){ /* 1024px */ 
.logo {width: 1.6em; /* 40px */height: 1.6em; /* 40px */}
}

/* ================================================================================
   SEARCH FUNCTION OVERLAY
   ================================================================================ */

/* The Overlay (background) */
.overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */   
    height: 100%;
    width: 100%;
    display: none;
    position: fixed; /* Stay in place */
    z-index: 999; /* Sit on top */
    left: 0;
    top: 0;
    background-color: rgb(0,0,0); /* Black fallback color */
    background-color: rgba(0,0,0, 0.85); /* Black w/opacity */
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: all 0.5s; /* 0.5 second transition effect to slide in or slide down the 
    overlay (height or width, depending on reveal) */

}	

	
/* Position the content inside the overlay */
.overlay-content {
  position: relative;
  top: 40%; /* 25% from the top */
  text-align: center; /* Centered text/links */
  margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block; /* Display block instead of inline */
  transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 50px;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
	height: 100%;
    width: 100%;
    top: 15px;
    right: 35px;
	
  }
}

/* ================================================================================
   GOOGLE SEARCH BOX
   ================================================================================ */

 /* CSS for changing placeholder color on search input box */
			

#searchbox
{
	height: 3em;
	border-radius: 0px;
    background-color: transparent !important;
}

input[type="text"], textarea {

  background-color : transparent; 
  border: none;
  font-family: "brandon-grotesque",sans-serif;
  font-size: 2vw;
  color: #ffffff;
	width: 50%;
	left: 25%;
	right: 25%;
	outline:none;

}

input[type=button], input[type=submit], input[type=reset]{
	display: none;
	outline:none;
}

.sexy_line{ 
    display:block;
    border:none;
	margin-left: 25%;
    margin-right: 25%;
    color:white;
    width: 50%;
    height:1px;
    background-color: rgba(221, 151, 26, 0.8)
}

.sexy_line2{ 
    display:block;
    border:none;
	margin-left: 25%;
    margin-right: 25%;
    color:white;
	margin-bottom: 0;
    width: 50%;
	opacity: 0.5;
    height:1px;
    background-color: rgba(221, 151, 26, 0.8)
}

.sexy_line3{ 
    display:block;
    border:none;
	margin-left: 40%;
    margin-right: 40%;
    color:white;
    width: 20%;
    height:1px;
    background-color: rgba(221, 151, 26, 0.8)
}
/* ================================================================================
   GOOGLE SEARCH RESULTS
   ================================================================================ */

 /* Use a different font family for search results */
    .gs-title, .gs-snippet {
        font-family: "brandon-grotesque",sans-serif;
		text-decoration: none !important;
    }


    /* Add a border between individual search results */
    .gs-webResult {
        border: none;
      padding: 2.5em;
    }
    .gsc-result:hover { 
		border: none;
    }
    /* Do no display the count of search results */
    .gsc-result-info {
        display: none;
    }


    /* Hide the Google branding in search results */
    .gcsc-branding {
        display: none;
    }

    /* Hide the thumbnail images in search results */
    .gsc-thumbnail { 
        display: none;
    }

    /* Hide the snippets in Google search results */
    .gs-snippet {
 
    }

    /* Change the font size of the title of search results */
    .gs-title a {
        font-size: 1.2em !important;
    }

    /* Change the font size of snippets inside search results */
    .gs-snippet {font-size: 1.1em !important;
    }

    /* Google Custom Search highlights matching words in bold, toggle that */
    .gs-title b, .gs-snippet b {
		font-family: "brandon-grotesque",sans-serif;
			text-decoration: none !important;
    }

    /* Do no display the URL of web pages in search results */
    .gsc-url-top, .gsc-url-bottom {
        display: none !important;
    }

    /* Highlight the pagination buttons at the bottom of search results */
    .gsc-cursor-page {
        font-size: 1em;
        padding: 4px 8px;
        font-family: "brandon-grotesque",sans-serif;
        border: none;
    }

/* NAVIGATION
   ======================== */
/* ---- base (mobile only) ---- */
#outer-wrap {position:relative;overflow:hidden;width:100%;}
#inner-wrap {position:relative;width:100%;}
.nav-btm {margin-bottom: 0em;}
.nav-btn {
    display: block;
    position: relative;
    float: left;
    width: 2.175em; /* 38px */
    height: 2em; /* 32px */
    padding: 0;
	margin-top: 1em;
    overflow: hidden;
    white-space: nowrap;
    text-indent: 100%;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
    opacity: 0.75;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.nav-btn:hover, .nav-btn:focus {filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);opacity: 1;
}
#nav {
	z-index:200;
	position: relative;
	overflow: hidden;
	width: 100%;
	text-align: left;
	margin-top: 0 !important; /* disables .half-top class on mobile screens */
}



#nav .close-btn {display:none;}
#nav .block {
	z-index: 2;
	position: relative;
	padding: 0.75em 1.25em;
}
#nav ul {
	*zoom:1;
	display:block;
	margin:0 !important; /* enables nav to flush left and top on mobile*/
	padding:0 !important; /* enables nav to flush left and top on mobile*/
}
#nav ul:before,#nav ul:after {content:"";display:table;}
#nav ul:after {clear:both;}
#nav li {
	display: block;
	font-family: "brandon-grotesque",sans-serif !important;
}
#nav li a {
	display: block;
	color: #7C7A77;
    font-style: normal;
    font-weight: 700;
	font-size: 0.85em;
	line-height: 0em;
	text-transform: uppercase;
	letter-spacing: 3px;
	outline: none;
	text-decoration: none;
}
#nav li a:hover {
	color: #ffffff; /* canvas */
	text-decoration: none;
}
/* ---- 720 ( - ) javascript ---- */
@media screen and (max-width: 45em ) { /* MAX-WIDTH 720px */
#nav {position: absolute;top: 0; }
#nav:not(:target) {z-index: 1;height: 0;}
#nav:target .close-btn {display: block;}
#nav .block {position: relative;padding: 0;}
#nav li {position: relative;border-top: 1px solid rgba(255, 255, 255, 0.1);}
#nav li:last-child {border-bottom: 1px solid rgba(255, 255, 255, 0.1);}
#nav li.is-active:after {
    z-index: 50;
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: -0.03125em;
    margin-top: -0.625em;
    border-top: 0.625em transparent solid;
    border-bottom: 0.625em transparent solid;
    border-right: 0.625em white solid;
}
#nav li a {
    padding: 1.55714em 1.84286em;
    -webkit-transition: all 0.25s ease-in-out 0s;
    -moz-transition: all 0.25s ease-in-out 0s;
    -ms-transition: all 0.25s ease-in-out 0s;
    -o-transition: all 0.25s ease-in-out 0s;
    transition: all 0.25s ease-in-out 0s;
}
.js-ready #nav {
    height: 100%;
    width: 75%;
    background: #222222; /*rgb(62,57,53);*/
    -webkit-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
    -moz-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
    box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
}
.js-ready #nav .block {background:transparent;}
.js-ready #nav .close-btn {display:block;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=70);opacity:.7;}
.js-ready #nav .close-btn:focus,.js-ready #nav .close-btn:hover {filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);opacity:1;}
.js-ready #nav {left:-75%;}
.js-ready #inner-wrap {left:0;}
.js-nav #inner-wrap {left:75%;}
.csstransforms3d.csstransitions.js-ready #nav {left:0;-webkit-backface-visibility: hidden; /*prevents safari flicker*/-webkit-transform:translate3d(-100%,0,0);-moz-transform:translate3d(-100%,0,0);-ms-transform:translate3d(-100%,0,0);-o-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-o-backface-visibility:hidden;backface-visibility:hidden;}
.csstransforms3d.csstransitions.js-ready #inner-wrap {left:0!important;-webkit-backface-visibility: hidden; /*prevents safari flicker*/-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-transition:-webkit-transform 500ms ease;-moz-transition:-moz-transform 500ms ease;-o-transition:-o-transform 500ms ease;transition:transform 500ms ease;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-o-backface-visibility:hidden;backface-visibility:hidden;}
.csstransforms3d.csstransitions.js-nav #inner-wrap {-webkit-backface-visibility: hidden; /*prevents safari flicker*/-webkit-transform:translate3d(75%,0,0) scale3d(1,1,1);-moz-transform:translate3d(75%,0,0) scale3d(1,1,1);-ms-transform:translate3d(75%,0,0) scale3d(1,1,1);-o-transform:translate3d(75%,0,0) scale3d(1,1,1);transform:translate3d(75%,0,0) scale3d(1,1,1);}
.csstransforms3d.csstransitions.js-ready #nav .block {filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=70);opacity:.7;-webkit-backface-visibility: hidden; /*prevents safari flicker*/-webkit-transition:opacity 300ms 100ms,-webkit-transform 500ms ease;-webkit-transition-delay:ease,0;-moz-transition:opacity 300ms 100ms ease,-moz-transform 500ms ease;-o-transition:opacity 300ms 100ms ease,-o-transform 500ms ease;transition:opacity 300ms 100ms ease,transform 500ms ease;-webkit-transform:translate3d(75%,0,0) scale3d(0.9,0.9,0.9);-moz-transform:translate3d(75%,0,0) scale3d(0.9,0.9,0.9);-ms-transform:translate3d(75%,0,0) scale3d(0.9,0.9,0.9);-o-transform:translate3d(75%,0,0) scale3d(0.9,0.9,0.9);transform:translate3d(75%,0,0) scale3d(0.9,0.9,0.9);-webkit-backface-visibility: hidden; /*prevents safari flicker*/-webkit-transform-origin:50% 0;-moz-transform-origin:50% 0;-ms-transform-origin:50% 0;-o-transform-origin:50% 0;transform-origin:50% 0;}
.csstransforms3d.csstransitions.js-nav #nav .block {filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);opacity:1;-webkit-backface-visibility: hidden; /*prevents safari flicker*/-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
}
/* ---- 721 ( + ) ---- */ 
@media screen and (min-width: 45.0625em){ /* 721px */ 
.nav-btm {margin-bottom: 1.40625em /* 22.5px */}
.nav-btn {display: none;}
#nav {display: block;text-align: center;}
#nav .block {padding: 0; }
#nav ul {text-align: center;white-space: nowrap;}
#nav li {
    display: inline-block;
    color: #f4efe6; /* canvas */
    font-family: "brandon-grotesque", sans-serif;
    font-style: normal;
    font-weight: 700;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}
#nav li:last-child {border-right: none;}
#nav li a {
    color: #f4efe6; /* canvas */
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.125em; /* 2px */
    font-size: 0.8125em;
    border-bottom: 2px solid rgb(34,34,34);
    padding: 0.42857em 0.15714em 0.22857em 0.15714em;
    margin: 0 0.6em;
    -webkit-backface-visibility: hidden; /*prevents safari flicker*/
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}
#nav li a:hover {text-shadow: 0px 0px 11px #FFFFFF;
color: #FFFFFF;
 -o-transition:color .3s ease-in-out;
  -ms-transition:color .3s ease-in-out;
  -moz-transition:color .3s ease-in-out;
  -webkit-transition:color .3s ease-in-out; /* canvas */}
}
/* ---- 960 ( + ) large desktop ---- */
@media screen and (min-width: 60em){ /* 960px */
#nav {display: inline-block;float: right;position: relative;}
#nav ul {text-align: right;white-space: nowrap;}
#nav li {
    font-weight: 700;
    padding: 1em; /* for spacing */
    border-right: none;
}
#nav li a {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09375em; /* 1.5px */
    font-size: 0.8125em;
    padding: 0 0 .3em 0; /* for underline */
    -webkit-backface-visibility: hidden; /*prevents safari flicker*/
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}
#nav li.is-active a {color: #fff;}
}


/* ================================================================================
   BILLBOARD
   ================================================================================ */

/* ---- base (all) ---- */ 
.billboard {background: #ffffff; color: #222222; margin: 0 auto;}
.bill-img {
    display: inline-block;
    width: 100%;
    width: auto \9; /* IE8 and below */ 
    height: auto;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
    max-height: 746px;
	max-height: 46.625rem;
	/*background-attachment: fixed;
	background-size: cover;*/
}
.bill-img-sm {
    position: absolute;
    top: 0;
    width: 100%;
}
.bill-arrow { /* TEST for animated gif */
    background-size: 100% 100%;
    width: 2.1875em; /* 35px */
    height: 2.625em; /* 42px */
    display: block;
}
.down-arrows {display: none;}
/* ---- 1200 ( + ) large desktop ---- */
@media screen and (min-width: 75em){ /* 1200px */
.down-arrows {
    display: block;
    -webkit-animation-duration: 1s;-moz-animation-duration: 1s;-ms-animation-duration: 1s;-o-animation-duration: 1s;animation-duration: 1s;
    -webkit-animation-delay: 2s;-moz-animation-delay: 2s;-ms-animation-delay: 2s;-o-animation-delay: 2s;animation-delay: 2s;
}
.down-arrows a {
	display: block;
	margin: 0 auto;
	width: 1.1875em; /* 35px */
}
.down-arrows img {
    background-size: 50% 50%;
width: 1.640625em; /* 26.25px */
height: 0.609375em; /* 9.75px */
    display: block;
}
}

/* BILL SLIDE
   ======================== */
/* ---- base (all) ---- */  
.bill-slide {padding-top: 5%;}
.bill-half-slide,
.bill-full-slide {
    overflow: hidden;
    position: relative;
    padding-bottom: 6%;
}
/* ---- 960 ( + ) large desktop ---- */
@media screen and (min-width: 60em){ /* 960px */
.bill-slide {padding-top: 0;}
}
/* ---- 1100 ( + ) large desktop ---- */
@media screen and (min-width: 68.75em){ /* 1100px */
.bill-slide {padding-top: 5%;}
}

/* HEADLINE
   ======================== */
/* ---- base (all) ---- */  
.bill-head {
    color: #f4efe6; /* canvas */
    font-family: 'veneerregular', sans-serif;
    font-size: 7.5em; /* 120px */
    letter-spacing: 3px;
    text-transform: uppercase;
    display: block;
    margin-top: .5em;
    margin-bottom: -.5em;
    -webkit-animation-duration: 1s;-moz-animation-duration: 1s;-ms-animation-duration: 1s;-o-animation-duration: 1s;animation-duration: 1s;
    -webkit-animation-delay: .5s;-moz-animation-delay: .5s;-ms-animation-delay: .5s;-o-animation-delay: .5s;animation-delay: .5s;
}

/* SUB-HEADLINE
   ======================== */
/* ---- base (all) ---- */  
.bill-sub {
    font-family: "brandon-grotesque",sans-serif;
    font-size: 1.1em;
    letter-spacing: 1px;
    font-style: italic;
    font-weight: 500;
    -webkit-animation-duration: 1s;-moz-animation-duration: 1s;-ms-animation-duration: 1s;-o-animation-duration: 1s;animation-duration: 1s;
    -webkit-animation-delay: 1s;-moz-animation-delay: 1s;-ms-animation-delay: 1s;-o-animation-delay: 1s;animation-delay: 1s;
}
.bill-sub-sm {
    font-family: "brandon-grotesque",sans-serif;
    font-size: .8em;
    letter-spacing: 0;
    font-style: italic;
    font-weight: 500;
    -webkit-animation-duration: 1s;-moz-animation-duration: 1s;-ms-animation-duration: 1s;-o-animation-duration: 1s;animation-duration: 1s;
    -webkit-animation-delay: 1s;-moz-animation-delay: 1s;-ms-animation-delay: 1s;-o-animation-delay: 1s;animation-delay: 1s;
}
/* ---- 480 ( + ) smartphones ---- */
@media screen and (min-width: 30em){ /* 480px */
.bill-sub {font-size: 1.5em /* 24px */;letter-spacing: 2px;font-weight: 400;}
.bill-sub-sm {font-size: 1em /* 24px */;letter-spacing: 1px;font-weight: 400;}
}
/* ---- 768 ( + ) ---- */
@media screen and (min-width: 48em){ /* 768px */
.bill-sub {font-size: 2em /* 32px */;letter-spacing: 3px;font-weight: 300;}
.bill-sub-sm {font-size: 1.5em /* 32px */;letter-spacing: 2px;font-weight: 300;}
}
/* ---- 960 ( + ) large desktop ---- */
@media screen and (min-width: 60em){ /* 960px */
.bill-sub {font-size: 2.75em /* 44px */;letter-spacing: 4px;font-weight: 300;}
.bill-sub-sm {font-size: 2em /* 32px */;letter-spacing: 2px;font-weight: 300;}
}

/* SEPARATOR
   ======================== */
/* ---- base (all) ---- */  
.bill-sep {
    border-bottom: 1px solid;
    height: 1px; /* 22px */
    width: 9.0625em /* 145px */;
    margin: .5em auto 1em;
    display: none;
    -webkit-animation-duration: 1s;-moz-animation-duration: 1s;-ms-animation-duration: 1s;-o-animation-duration: 1s;animation-duration: 1s;
    -webkit-animation-delay: 1s;-moz-animation-delay: 1s;-ms-animation-delay: 1s;-o-animation-delay: 1s;animation-delay: 1s;
}
/* ---- 768 ( + ) ---- */
@media screen and (min-width: 48em){ /* 768px */
.bill-sep {width: 12.1875em /* 195px */;margin: 1em auto 1.5em;display: none;}
}
/* ---- 960 ( + ) large desktop ---- */
@media screen and (min-width: 60em){ /* 960px */
.bill-sep {width: 15.3125em /* 245px */;margin: 1em auto 1.5em;display: inherit;}
}

/* TEXT
   ======================== */
/* ---- base (all) ---- */  
.bill-text {
    font-family: "brandon-grotesque",sans-serif;
    font-size: 1em;
    line-height: 1.1;
    font-style: normal;
    font-weight: 400;
    margin: 0 auto;
    display: none;
    -webkit-animation-duration: 1s;-moz-animation-duration: 1s;-ms-animation-duration: 1s;-o-animation-duration: 1s;animation-duration: 1s;
    -webkit-animation-delay: 1s;-moz-animation-delay: 1s;-ms-animation-delay: 1s;-o-animation-delay: 1s;animation-delay: 1s;
}
/* ---- 768 ( + ) ---- */
@media screen and (min-width: 48em){ /* 768px */
.bill-text {font-size: 1.5em /* 24px */;font-weight: 300;display: none;}
}
/* ---- 960 ( + ) large desktop ---- */
@media screen and (min-width: 60em){ /* 960px */
.bill-text {font-size: 1.625em /* 26px */;font-weight: 300;display: inherit;}
}

/* LOGO GRAPHIC HEADLINE(s)
   ======================== */
/* ---- base (all) ---- */
.logo-left {
    width: auto;
    height: auto;
    max-width: 110px;
    max-height: 129px;
    z-index: 1;
    position: relative;
    float: left;
    -webkit-animation-duration: 1s;-moz-animation-duration: 1s;-ms-animation-duration: 1s;-o-animation-duration: 1s;animation-duration: 1s;
    -webkit-animation-delay: .5s;-moz-animation-delay: .5s;-ms-animation-delay: .5s;-o-animation-delay: .5s;animation-delay: .5s;
}
.logo-center {
    width: auto;
    height: auto;
    max-width: 110px;
    max-height: 129px;
    z-index: 1;
    margin-bottom: 5em;
    -webkit-animation-duration: 1s;-moz-animation-duration: 1s;-ms-animation-duration: 1s;-o-animation-duration: 1s;animation-duration: 1s;
    -webkit-animation-delay: .5s;-moz-animation-delay: .5s;-ms-animation-delay: .5s;-o-animation-delay: .5s;animation-delay: .5s;
}

/* ---- 480 ( + ) smartphones ---- */
@media screen and (min-width: 30em){ /* 480px */
.logo-left {max-width: 185px; max-height: 218px; padding-left: 5%;}
.logo-center {margin-top: 10%;}
}
/* ---- 721 ( + ) ---- */ 
@media screen and (min-width: 45.0625em){ /* 721px */ 
.logo-left {max-width: 217px; max-height: 255px;}
.logo-center {max-width: 460px; max-height: 202px; margin-top: 6%;} 
}
/* ---- 768 ( + ) ---- */
@media screen and (min-width: 48em){ /* 768px */
.logo-left {max-width: 285px; max-height: 335px;}
}
/* ---- 960 ( + ) large desktop ---- */
@media screen and (min-width: 60em){ /* 960px */
.logo-left {max-width: 350px; max-height: 412px; padding-top: 5% !important;} /* countering .bill-slide queries */
.logo-center {max-width: 560px; max-height: 246px; margin-top: 12%;} /* countering .bill-slide queries */
}
/* ---- 1100 ( + ) large desktop ---- */
@media screen and (min-width: 68.75em){ /* 1100px */
}
/* ---- 1200 ( + ) large desktop ---- */
@media screen and (min-width: 75em){ /* 1200px */
.logo-left {max-width: 435px; max-height: 512px;}
.logo-center {max-width: 660px; max-height: 290px; margin-top: 13%;} /* countering .bill-slide queries */
}



/* ================================================================================
   CONTENT
   ================================================================================ */
 
 /* ---- base (all) ---- */  
.content {background: #ffffff; color: #222222; margin: 0 auto;}
.quote {
    padding-top: 7%;
    font-family: "ff-meta-serif-web-pro", serif;
	font-style: italic;
    font-weight: 500;
    font-size: 1.1875em;
    line-height: 1.65;
    text-align: center;
}
#bottomLeftNav {margin-top: 3em; margin-bottom: 4em;}
/* ---- 960 ( + ) large desktop ---- */
@media screen and (min-width: 60em){ /* 960px */
.quote {text-align: left;}
#bottomLeftNav {margin-top: 0; margin-bottom: 0;}
}

/* MICRO-LOGOS
   ======================== */
/* ---- base (all) ---- */ 
.micro-logo {background-size: 100% 100%;display: block;}
.micro-logo {width: 160px; height: 143px;margin-top: 0;}
/* ---- 480 ( + ) smartphones ---- */
@media screen and (min-width: 30em){ /* 480px */
.micro-logo {width: 205px; height: 183px;margin-top: 4%;}
}
/* ---- 721 ( + ) ---- */ 
@media screen and (min-width: 45.0625em){ /* 721px */ 
.micro-logo {width: 350px; height: 312px;margin-top: 0;}
}
/* ---- 768 ( + ) ---- */
@media screen and (min-width: 48em){ /* 768px */
}
/* ---- 960 ( + ) large desktop ---- */
@media screen and (min-width: 60em){ /* 960px */
.micro-logo {width: 390px; height: 348px;margin-top: 7%;}
}
/* ---- 1100 ( + ) xlarge desktop ---- */
@media screen and (min-width: 68.75em){ /* 1100px */
.micro-logo {width: 415px; height: 370px;margin-top: 5%;}
.micro-logo {margin-bottom: 4em;}
}
/* ---- 1200 ( + ) xxlarge desktop ---- */
@media screen and (min-width: 75em){ /* 1200px */
.micro-logo {margin-top: 6%;}
}
/* ---- 1400 ( + ) xxxlarge desktop ---- */
@media screen and (min-width: 87.5em){ /* 1400px */
.micro-logo {width: 449px; height: 400px;margin-top: 10%;}
}

/* SECONDARY NAV
   ======================== */
/* ---- base (all) ---- */ 
ul.secnav {
    list-style: none;
    font-family: "brandon-grotesque", sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 0.75em;
    text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 1.4;
	padding-left: 0;
}

.secnav li:first-child {border-top: 1px solid rgba(34, 34, 34, 0.1)/*rgba(255, 255, 255, 0)*/;}
.secnav li {text-align: center;position: relative;border-top: 1px solid rgba(34, 34, 34, 0.1)/*rgba(255, 255, 255, 0.1)*/;}
.secnav li:last-child {border-bottom: 1px solid rgba(34, 34, 34, 0.1)/*rgba(255, 255, 255, 0)*/;margin-bottom: -13px;}
.secnav li a {
    display: block;
    padding: 1em 1.5em;
    color: #222222;
	outline: 0;
    text-decoration: none;
}
.secnav li a:hover {color: #dd971a; /* yellow */}
.secnav li a.current {color: #dd971a; /* yellow */}
/* ---- 960 ( + ) large desktop ---- */
@media screen and (min-width: 60em){ /* 960px */
.secnav li {text-align: left;}
.secnav li:first-child {border-top: 1px solid rgba(34, 34, 34, 0)/*rgba(255, 255, 255, 0)*/;}
.secnav li a:hover {
    /*color: #f4efe6; /* canvas */
    color: #dd971a; /* yellow */
    /*background: #222222;*/
    background-color: black;		
}
.secnav li a.current {
    color: #dd971a; /* yellow */	
	background-color: black;
}
}

/* SECNAV2
   ======================== */

ul.secnav2 {
    list-style: none;
    font-family: "brandon-grotesque", sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 0.75em;
    text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 1.4;
	padding-left: 0;
}

.secnav2 li:first-child {border-top: 1px solid rgba(34, 34, 34, 0.1)/*rgba(255, 255, 255, 0)*/;}
.secnav2 li {text-align: center;position: relative;border-top: 1px solid rgba(34, 34, 34, 0.1)/*rgba(255, 255, 255, 0.1)*/;}
.secnav2 li:last-child {border-bottom: 1px solid rgba(34, 34, 34, 0.1)/*rgba(255, 255, 255, 0)*/;margin-bottom: -13px;}
.secnav2 li a {
    display: block;
    padding: 1em 1.5em;
    color: #222222;
    text-decoration: none;
    -webkit-backface-visibility: hidden;
}
.secnav2 li a:hover {color: #dd971a; /* yellow */}
.secnav2 li a.current {color: #dd971a; /* yellow */}


/* TERTIARY NAV
   ======================== */
/* ---- base (all) ---- */ 
.ternav {
    list-style: none;
    background: #ffffff;
    padding: 0;
    text-transform: none;
}
.ternav li:first-child {border-top: 1px solid rgba(34, 34, 34, 0.1)/*rgba(255, 255, 255, 0)*/;}
.ternav li:last-child {border-bottom: 1px solid rgba(34, 34, 34, 0.1)/*rgba(255, 255, 255, 0)*/;}
.ternav li a {}
.ternav li a:hover {color: #f4efe6 !Important; background: #222222;}

.ternav2 {
    list-style: none;
    background: #ffffff;
    padding: 0;
    text-transform: none;
}
.ternav2 li:first-child {border-top: 1px solid rgba(34, 34, 34, 0.1)/*rgba(255, 255, 255, 0)*/;}
.ternav2 li:last-child {border-bottom: 1px solid rgba(34, 34, 34, 0.1)/*rgba(255, 255, 255, 0)*/;}
.ternav2 li a {}
.ternav2 li a:hover {color: #f4efe6 !Important; background: #222222;}


/* SELECTED
   ======================== */
/* ---- base (all) ---- */ 

.selected {
    color: #dd971a; /* yellow */}

.selectedternav {color: #f4efe6 !Important; background: #222222;}

.selectednav {color: #dd971a;}
/* ================================================================================
   THUMBS
   ================================================================================ */
 
 /* ---- base (all) ---- */  
.thumbs {background: #ffffff; color: #222222; margin: 0 auto; padding-bottom: 1em;}
.thumbs2 {background: #f4f4f4; color: #222222; margin: 0 auto; padding-bottom: 1em; border-top-left-radius: 10px; border-top-right-radius: 10px; }
.thumbs3 {background-image: url("../img/dictionarybg_tall.png"); color: #222222; margin: 0 auto; padding-bottom: 1em;   border-radius: 25px; min-height: 100px;
overflow: hidden;}
.thumbnail {
    max-width: 333px;
    max-height: 333px;
	border: 1px solid black; 
	 /* filter: url(filters.svg#grayscale); Firefox 3.5+ */
      filter: gray; /* IE5+ */
      -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */
      -webkit-transition: all .3s ease-in-out;  
	
    }

    .thumbnail:hover {
    filter: none;
      -webkit-filter: grayscale(0);
    }

.thumbnail2 {
    max-width: 333px;
    max-height: 333px;
	 /* filter: url(filters.svg#grayscale); Firefox 3.5+ */
      filter: gray; /* IE5+ */
      -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */
      -webkit-transition: all .3s ease-in-out;  
    }

    .thumbnail2:hover {
    filter: none;
      -webkit-filter: grayscale(0);
      -webkit-transform: scale(1.00);
    }

.thumbnail3 {
    max-width: 333px;
    max-height: 333px;
	opacity: 0.8;
	 /* filter: url(filters.svg#grayscale); Firefox 3.5+ */
      filter: gray; /* IE5+ */
      -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */
      -webkit-transition: all .3s ease-in-out;  
    }

    .thumbnail3:hover {
    filter: none;
		opacity: 1;
      -webkit-filter: grayscale(0);
      -webkit-transform: scale(1.04);
    }

/* ================================================================================
   EXAMPLE BOX SLIDER / HORIZONTAL SLIDER
   ================================================================================ */

/* Slideshow container */
.slideshow-container {
  position: relative;
  background: #f4f4f4;  
  background-image: url("dictionarybg_quote.png"); 
  color: #222222; 
  margin: 0 auto; 
border: 1px solid rgb(0, 0, 0, 0.2);
  outline-width: 1px; 
  padding-bottom: 2em; 
  padding-left: 4em; 
  padding-top: 2em;
  padding-right: 4em;   
  font-size: 0.9em;
}

.slideshow-container1 {
  position: relative;
  background: #dde5f0;  
  color: #222222; 
  margin: 0 auto; 
border: 1px solid rgb(0, 0, 0, 0.2);
  outline-width: 1px; 
  padding-bottom: 2em; 
  padding-left: 4em; 
  padding-top: 2em;
  padding-right: 4em;   
  font-size: 0.9em;
}

.slideshow-container2 {
  position: relative;
  background: #dde5f0;  
  color: #222222; 
  margin: 0 auto; 
border: 1px solid rgb(0, 0, 0, 0.2);
  outline-width: 1px; 
  padding-bottom: 2em; 
  padding-left: 4em; 
  padding-top: 2em;
  padding-right: 4em;   
  font-size: 0.9em;
}

.slideshow-container3 {
  position: relative;
  background: #dde5f0;  
  color: #222222; 
  margin: 0 auto; 
border: 1px solid rgb(0, 0, 0, 0.2);
  outline-width: 1px; 
  padding-bottom: 2em; 
  padding-left: 4em; 
  padding-top: 2em;
  padding-right: 4em;   
  font-size: 0.9em;
}

.slideshow-container4 {
  position: relative;
  background: #dde5f0;  
  color: #222222; 
  margin: 0 auto; 
border: 1px solid rgb(0, 0, 0, 0.2);
  outline-width: 1px; 
  padding-bottom: 2em; 
  padding-left: 4em; 
  padding-top: 2em;
  padding-right: 4em;   
  font-size: 0.9em;
}

/* Slides */
.mySlides {
  display: none;
  height: 25%;
}

.mySlides h3{
    font-family: "brandon-grotesque",sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 1em;
	margin-bottom: -1em;
    text-transform: uppercase;
	letter-spacing: 4px;
	display: block;
}

/* Slides */
.mySlides2 {
  display: none;
  height: 25%;
}

.mySlides2 h3{
    font-family: "brandon-grotesque",sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 1em;
	margin-bottom: -1em;
    text-transform: uppercase;
	letter-spacing: 4px;
	display: block;
}

/* Slides */
.mySlides3 {
  display: none;
  height: 25%;
}

.mySlides3 h3{
    font-family: "brandon-grotesque",sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 1em;
	margin-bottom: -1em;
    text-transform: uppercase;
	letter-spacing: 4px;
	display: block;
}

/* Slides */
.mySlides4 {
  display: none;
  height: 25%;
}

.mySlides4 h3{
    font-family: "brandon-grotesque",sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 1em;
	margin-bottom: -1em;
    text-transform: uppercase;
	letter-spacing: 4px;
	display: block;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -30px;
  padding: 40px;
  color: #888;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  position: absolute;
  right: 10;
  border-radius: 5px 0 0 5px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  color: #4D4D4D;
}

.prev1, .next1 {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -30px;
  padding: 40px;
  color: #888;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next1 {
  position: absolute;
  right: 10;
  border-radius: 5px 0 0 5px;
}

/* On hover, add a black background color with a little bit see-through */
.prev1:hover, .next1:hover {
  color: #4D4D4D;
}

/* ================================================================================
   ELEVEKSEMPLER - FARVEMENU
   ================================================================================ */
.dot_red {
  height: 12px;
  width: 12px;
  display: inline-block;
  background: rgba(255, 0, 0, 0.7);
  border-radius: 50%;
  border: 1px black solid;
  margin-left: 12px;
}

.dot_blue {
  height: 12px;
  width: 12px;
  display: inline-block;
  background: rgba(0, 0, 255, 0.7);
  border-radius: 50%;
  border: 1px black solid;
  margin-left: 12px;
}

.dot_green {
  height: 12px;
  width: 12px;
  display: inline-block;
  background: rgb(12 118 12);
  border-radius: 50%;
  border: 1px black solid;
  margin-left: 12px;
}

.dot_yellow {
  height: 12px;
  width: 12px;
  display: inline-block;
  background: rgb(193 193 0);
  border-radius: 50%;
  border: 1px black solid;
  margin-left: 12px;
}

.dot_purple {
  height: 12px;
  width: 12px;
  display: inline-block;
  background: rgba(255, 0, 255, 0.7);
  border-radius: 50%;
  border: 1px black solid;
  margin-left: 12px;
}

.dot_orange {
  height: 12px;
  width: 12px;
  display: inline-block;
  background: rgba(255, 165, 0, 1);
  border-radius: 50%;
  border: 1px black solid;
  margin-left: 12px;
}

.dot_brown {
  height: 12px;
  width: 12px;
  display: inline-block;
  background: rgba(139, 69, 19, 1);
  border-radius: 50%;
  border: 1px black solid;
  margin-left: 12px;
}

.dot_brown {
  height: 12px;
  width: 12px;
  display: inline-block;
  background: rgba(139, 69, 19, 1);
  border-radius: 50%;
  border: 1px black solid;
  margin-left: 12px;
}

.dot_white {
  height: 12px;
  width: 12px;
  display: inline-block;
  background: rgba(00, 00, 00, 0);
  border-radius: 50%;
  margin-left: 12px;
}	
	
.dot_cyan {
  height: 12px;
  width: 12px;
  display: inline-block;
  background: rgb(62 124 124);
  border-radius: 50%;
  border: 1px black solid;
  margin-left: 12px;
}
	.colors
{	cursor: pointer;
	padding-left: 1em;
	padding-right: 1em;
	font-style: italic;
	font-size: 0.8em;
	}
	
		.colors:hover
{	color: #dd971a;
	}
	
.someclass
{
	
	 -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
	
.black_border_box {background: #ffffff; border: 2px solid rgb(0, 0, 0, 0.7);  position: fixed;
  top: 35%;
  margin-top: -2.5em;
  right: -170px;
  width: 13em;
  transition: 0.3s;	} 

.black_border_box:hover {
  right: 0;
	}
	
#my_color_box
{
	display:none;
}


/* ================================================================================
   PASSWORD PAGE
   ================================================================================ */

        #dialogText {
            color: #dd971a;
            background-color: #000000;
        }
        
        #dialogWrap {
            position: absolute;
            left: 0;
			top: 0;
            width: 100%;
            height: 100%;
            display: table;
            background-color: #000000;
        }
        
        #dialogWrapCell {
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }
        
        #mainDialog {
            max-width: 400px;
            margin: 5px;
            margin-left: auto;
            margin-right: auto;
            background-color: #000000;
            overflow: hidden;
            text-align: left;
			color: #dd971a;
        }
        #mainDialog > * {
            padding: 10px 30px;
        }
        #passArea {
            padding: 20px 30px;
            background-color: #000000;
        }
        #passArea > * {
            margin: 5px auto;
        }
        #pass {
            width: 100%;
            height: 40px;
            font-size: 20px;
			border: none;
			background-color: #101010;
			color: #dd971a; 
			outline-width: 0;
			text-align: center;
}
        
        #messageWrapper {
            float: center;
            vertical-align: middle;
            line-height: 30px;
        }
        
        .notifyText {
            display: none;
        }
        
        #invalidPass {
            	color: #dd971a;
        }
        
        #success {
            	color: #dd971a;
        }
        
        #submitPass {
            font-size: 14px;
            border-radius: 5px;
			border: none;
            background-color: #000000;
			color: #dd971a;
            cursor: pointer;
			display: none;
        }
        #contentFrame {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        #attribution {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            text-align: center;
            padding: 10px;
            font-weight: bold;
            font-size: 0.8em;
        }
        #attribution, #attribution a {
            color: #999;
        }
        .error {
            display: none;
            color: #dd971a;
        }

/* ================================================================================
   EXAMPLE BOX
   ================================================================================ */

.examplebox {
  background: #f4f4f4;
  background-image: url("dictionarybg.png");
  height: auto;
  width: auto;
  color: #222222;
  margin: 0 auto;
  border: 1px solid rgba(0, 0, 0, 0.2);
  outline-width: 1px;
  font-size: 0.9em;
  padding-bottom: 1em; padding-left: 1em; padding-right: 1em; padding-top: 0.3em;
}

.examplebox a:hover {
  color: #dd971a;
  border-bottom: 0px solid #dd971a;
}

.examplebox_border {
  padding: 0em 0em 0em 0em;
  border: 1px solid black;
}

.examplebox_border p{
  padding-bottom: 1em; padding-left: 1.5em; padding-right: 1.5em; padding-top: 0.3em; font-weight: 500; font-size: 0.9em;
}

.examplebox_border span p{  padding: 5px; font-size: 0.8em;}

.examplebox_black {background: #303030; background-image: url("dictionarybg_black.png"); height: auto; width: auto; color: #DCDCDC; margin: 0 auto; border-radius: 35px; border: 1px solid rgb(0, 0, 0, 0.2);
  outline-width: 1px; padding-bottom: 1em; padding-left: 1em; padding-right: 1em; padding-top: 0.3em; font-size: 0.9em;}

.examplebox_black2 {background: #303030; background-image: url("dictionarybg_black.png"); height: auto; width: auto; color: #DCDCDC; margin: 0 auto; border: 1px solid rgb(0, 0, 0, 0.2);
  outline-width: 1px; font-size: 0.9em;}

.examplebox_black2 h1 {color: #FFFFFF; letter-spacing: 4px; font-weight: 600; margin-bottom: 1em; font-size: 1em;}
.examplebox_black2 h3 {color: #FFFFFF; letter-spacing: 4px; font-weight: 700; font-size: 0.7em;}
.examplebox_black2 img {padding-bottom: 0.5em;}
.examplebox_black2 p {font-size: 0.8em; text-align: center; font-weight: 600;}
.examplebox_black2 a {color: silver;}
.examplebox_black2 a:hover {
  color: #dd971a;
  border-bottom: 0px solid #dd971a;
}

.examplebox_black2 iframe {padding: 0px;}

.examplebox_white {
  background: #f4f4f4;
  height: auto;
  width: auto;
  color: #222222;
  margin: 0 auto;
  border: 1px solid rgba(0, 0, 0, 0.2);
  outline-width: 1px;
  font-size: 0.9em;
}

	.examplebox_black a:hover {color: #dd971a; border-bottom: 0px solid #dd971a;} 

.examplebox_blue {background: rgba(44, 105, 170, 0.08); height: auto; width: auto; color: #222222; margin: 0 auto; border: 1px solid rgb(0, 0, 0, 0.2);
  outline-width: 1px; padding-bottom: 1em; padding-left: 1em; padding-right: 1em; padding-top: 0.3em; font-size: 0.9em;}

.musicvideo {
  width: 80%;
  position: relative;
  left: 10%;
}

.circle_wrapper {
   height: 100%;
   width: 100%;
 }	
 #kachru_external-circle {
   background: #D2E7F2;
   border-radius: 50%;
   height: 520px;
   width: 520px;
   position: relative;
   left: 20%;
   right: 25%;
 
 }	 
 #kachru_external-circle p {
	 left: 38%;
   right: 40%;
   font-size: 0.7em;
   color: white;
	 width: 50%;
	 text-align: center;
   /* 	 
    Child elements with absolute positioning will be 
    positioned relative to this div 
   */
 }
 #kachru_outer-circle {
   position: absolute;
   background: #8FB1C9;
   border-radius: 50%;
   height: 375px;
   width: 375px;	 
   /* 	 
   /*
    Put top edge and left edge in the center
   */
   top: 50%;
   left: 50%;
   margin: -187.5px 0px 0px -187.5px;
   /* 
    Offset the position correctly with
    minus half of the width and minus half of the height 
   */
 }
 #kachru_inner-circle {
   position: absolute;
   background: #1D3662;
   border-radius: 50%;
   height: 250px;
   width: 250px;
   /* 	 
  border: 1px solid black;
   /*
    Put top edge and left edge in the center
   */
   top: 50%;
   left: 50%;
   margin: -125px 0px 0px -125px;
   /* 
    Offset the position correctly with
    minus half of the width and minus half of the height 
   */
 }

   @media only screen and (max-width: 700px){
 #kachru_inner-circle{
   height: 200px;
   width: 200px;
 }
#kachru_outer-circle {  
   height: 300px;
   width: 300px;
 }	 
#kachru_external-circle {
   height: 416px;
   width: 416px;
 }	}	 	   
.quotebg {background: #f4f4f4;  background-image: url("dictionarybg_quote.png"); height: auto; width: auto; color: #222222; margin: 0 auto; border: 1px solid rgb(0, 0, 0, 0.2);
  outline-width: 1px;  ; padding-bottom: 1em; padding-left: 3.5em; padding-right: 3em; padding-top: 0.9em; font-size: 0.9em;} 

.comicbook_bg {background: #F9F9F9; background-size:100% 100%; color: #222222; margin: 0 auto; border: 1px solid rgb(0, 0, 0, 0.15); padding-bottom: 1em; padding-left: 1em; padding-right: 1em; padding-top: 0.3em; font-size: 0.9em;} 

.exampleboxnewspaper {border: 3px solid black; height: 77em; 
	-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);} 

.exampleboxnewspaper p {font-size: 0.95em; word-wrap:break-word;} 

.examplebox2 {background: rgba(44, 105, 170, 0.08); height: 80%; width: 70%; color: #222222; margin: 0 auto; border: 1px solid rgb(0, 0, 0, 0.2);
  outline-width: 1px; border-radius: 10px; padding-left: 1em; padding-right: 1em; font-size: 0.85em; padding-top: 2px; padding-bottom: 0.2em;} 

.examplebox2:hover {background: rgba(44, 105, 170, 0.1)}

.examplebox_toulmin {background: rgba(44, 105, 170, 0.08); height: 80%; width: 50%; color: #222222; margin: 0 auto; outline-style: solid;
  outline-width: 1px; padding-left: 1em; padding-right: 1em; font-size: 0.85em; padding-top: 2px; padding-bottom: 0.2em;} 

#toulmin_text {text-align: center; padding-left: 20%; padding-right: 20%; font-size: 0.95em;}

.examplebox_toulmin:hover {background: rgba(44, 105, 170, 0.1); cursor: pointer;}

.examplebox3 {background: #000000; height: auto; width: auto; color: #222222; margin: 0 auto; outline-style: solid;
  outline-width: 1px;  ; padding-bottom: 1em; padding-left: 1em; padding-right: 1em; padding-top: 0.3em; font-size: 0.9em;} 

.scrabblebg {background: #f4f4f4; outline-style: solid;
  outline-width: 1px; padding: 2em;}

  /* 100% Image Width on Smaller Screens & Edited By Sowkat*/
   @media only screen and (max-width: 700px){
    .exampleboxnewspaper {
                    height: auto;
                    box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
                    display: inline-table;
                   }     
    .exampleboxnewspaper header_news {
                    font-size: 3em;
                    line-height: 45px;
                  }            
    .exampleboxnewspaper.column {
                    padding: 2px;
                  }              
    .exampleboxnewspaper p {
                    font-size: 0.93em;
                    line-height: 22px;
                    text-align: left;
                  } 
    .exampleboxnewspaper sub_heading {
                    font-size: 1.2em;
                    line-height: 32px;  
                  }               
                }
/* ================================================================================
   MENU SELECTION
   ================================================================================ */

#text2 {
    padding: 1em;
	margin-bottom: -1em;
	font-size: 0.7em;
    text-align: right; 
}

.text2 {
    padding: 1em;
	margin-top: 0;
	margin-bottom: -1em;
	font-size: 0.7em;
	text-align: right;
}

.text4 {
    margin-bottom: 0em;
	margin-top: 0em;
	color: #000000;
	font-size: 0.85em;
	text-align: right;
	font-family: "ff-meta-serif-web-pro", serif;
	
}

#text3 {
	font-size: 0.9em;
}

#selectedmenu {
    list-style: none;
    font-family: "brandon-grotesque", sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 1em;
    text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 1.4;
	padding-left: 0;
	color: #dd971a;
}

#selectedmenu li a:hover {list-style: none;
    font-family: "brandon-grotesque", sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 1em;
    text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 1.4;
	padding-left: 0;
	color: #dd971a;}

.rhetoricalpentagon {background: #ffffff;  background-image: url("../img//rhetoricalpentagon.png"); background-repeat: no-repeat; background-size: contain; color: #222222; margin-left: 6em; outline-style: none;}


/* ================================================================================
   MANSON (content div)
   ================================================================================ */
 
 /* ---- base (all) ---- */  
.manson {
    border: 1px solid #a9a1aa ;
	-webkit-box-shadow: -1px 1px 12px -4px rgba(0,0,0,0.62);
-moz-box-shadow: -1px 1px 12px -4px rgba(0,0,0,0.62);
box-shadow: -1px 1px 12px -4px rgba(0,0,0,0.62);
    max-width: 350px;
    max-height: auto;
	text-align: center;
    font-style: normal;
    font-weight: 500;
    font-size: 0.95em;
	background-color: #ffffff;
	 opacity: 1.0;
	
}

.manson:hover {
    border: 1px solid #a9a1aa ;
	-webkit-box-shadow: -1px 1px 16px -4px rgba(0,0,0,0.62);
-moz-box-shadow: -1px 1px 16px -4px rgba(0,0,0,0.62);
box-shadow: -1px 1px 16px -4px rgba(0,0,0,0.62);
}

.text {
    padding: 1em;
	border: none;
	margin-bottom: -1em;
    text-align: center; 
}

a {text-decoration: none; color: #222222;-webkit-backface-visibility: hidden; /*prevents safari flicker*/-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;}
a:hover {color: #000000;}

/* ================================================================================
   JUMPMENU
   ================================================================================ */
 
 /* ---- base (all) ---- */  
.jumpmenu {
    border: 1px solid #a9a1aa ;
	-webkit-box-shadow: -1px 1px 12px -4px rgba(0,0,0,0.62);
-moz-box-shadow: -1px 1px 12px -4px rgba(0,0,0,0.62);
box-shadow: -1px 1px 12px -4px rgba(0,0,0,0.62);
    max-width: 350px;
    max-height: auto;
	text-align: center;
	position: absolute;
	right: -172px;
	top: 23px;
    font-style: normal;
    font-weight: 500;
    font-size: 0.85em;
	background-color: #ffffff;
	 opacity: 1.0;
	
}

#text {
    padding: 2em;
	margin-bottom: -1em;
    text-align: center; 
}

a {text-decoration: none; color: #222222;-webkit-backface-visibility: hidden; /*prevents safari flicker*/-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;}
a:hover {color: #000000;}

/* ---- 960 ( + ) large desktop ---- */
@media screen and (max-width: 60em){
	display: none;}

/* ================================================================================
   SLIDE IN DIV
   ================================================================================ */

.fadeinleft {
	opacity:0;
	max-width:100%;
	
}

.come-in {
  transform: translateY(150px);
  animation: come-in 0.8s ease forwards;
}
.come-in:nth-child(odd) {
  animation-duration: 0.6s;
}
.already-visible {
  transform: translateY(0);
  animation: none;
}

@keyframes come-in {
  to { transform: translateY(0); }
}

/* ================================================================================
   MASONRY
   ================================================================================ */
 
 /* ---- base (all) ---- */  
.masonry-bgd {background: #f4f4f4; color: #222222; margin: 0 auto; padding-bottom: 2.3em;}
#masonry {background: #f4f4f4; color: #222222; width: auto; margin: 0 auto;}
a.load-more {
    /*width: 95%;
    margin: 0 auto;*/
    border-top: solid 1px #c8c8c8; border-bottom: solid 1px #c8c8c8;
    text-align: center;
    font-family: "brandon-grotesque",sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 1em;
    text-transform: uppercase;
	letter-spacing: 1px;
	display: block;
	line-height: 1.4;
	padding: 1em;
	text-decoration: none;
	color: #222222;
    -webkit-backface-visibility: hidden; /*prevents safari flicker*/-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;
}
a.load-more:hover {background: #222222;color: #f4efe6;}
.item {
    background: #ffffff;
	display: block;
	float: left;
	/*width: 33.33%;*/
	width: 17.1875em;
	/*width: 350px;*/
	margin: 0 1.40625em 2.8125em 1.40625em;
	border: solid 1px #bfbfbf;
	-webkit-box-shadow: 0 0 5px #bfbfbf;
	-moz-box-shadow: 0 0 5px #bfbfbf;
	box-shadow: 0 0 5px #bfbfbf;
}
.item img {
    width: 100%;
	height: auto;
}
.item-title {
    font-family: "brandon-grotesque",sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 1.125em;
    text-transform: uppercase;
	letter-spacing: 1px;
	display: block;
	line-height: 1.4;
	text-align: center;
	padding: 2.4em 2em 0 2em;
}
.item-title a {text-decoration: none; color: #222222;-webkit-backface-visibility: hidden; /*prevents safari flicker*/-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;}
.item-title a:hover {color: #dd971a;}
.item-subtitle {
    font-family: "ff-meta-serif-web-pro", serif;
	font-style: normal;
    font-weight: 700;
    font-size: 1em;
    color: #683926;
	display: block;
	line-height: 1.4;
	text-align: center;
	padding: 0 0 .2em 0;
}
.item p {
    text-align: center;
    padding: 0 2em 2em 2em;
}
.item p a {border-bottom: none; font-style: normal; font-weight: normal;}
/* ---- 480 ( + ) smartphones ---- */
@media screen and (min-width: 30em){ /* 480px */
.item {width: 12.5em;}
.item-title {font-size: 1em; padding: 2.4em 1em 0 1em;}
.item p {font-size: 0.875em}
}
/* ---- 768 ( + ) ---- */
@media screen and (min-width: 48em){ /* 768px */
.item {width: 17.1875em;}
.item-title {font-size: 1.125em; padding: 2.4em 1em 0 1em;}
.item p {font-size: 1em}
}
/* ---- 960 ( + ) large desktop ---- */
@media screen and (min-width: 60em){ /* 960px */
.item-title {font-size: 1em; padding: 2.4em 1em 0 1em;}
}
/* ---- 1180 ( + ) xlarge desktop ---- */
@media screen and (min-width: 73.75em){ /* 1180px */
.item {width: 21.875em;}
.item-title {padding: 2.4em 2em 0 2em;}
}


/* ================================================================================
   EMAIL, LOCATIONS & CONTACT
   ================================================================================ */
 
 /* ---- base (all) ---- */  
.action {background: #ffffff; color: #222222; margin: 0 auto; padding-bottom: 1em;}
.action button {
    border: 0;
    width: 8px;
    height: 15px;
    padding: 15px 0 0 20px;
    background: transparent url("../img/global/arrow-input-gray.png") right center no-repeat;		
    background-image: -webkit-linear-gradient(transparent, transparent), url("../img/global/arrow-input-gray.svg");
    background-image: linear-gradient(transparent, transparent), url("../img/global/arrow-input-gray.svg");
}
.action input.name, 
.action input.signup,
.contact input.name,
.contact input.signup,
.contact textarea.comments {
    background-color: rgb(255,255,255);
    border: 1px solid #999999;
    padding: 0.8em 1em 0.6em 1em;
    margin: 1em 0 1em 0;
    font-family: "brandon-grotesque", sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.0625em; /* 1px */
    font-size: 1em;
    color: rgb(34,34,34); /* gray */
}
.contact input.name,
.contact input.signup,
.contact textarea.comments {text-transform: none !important;}
.action input.name {margin-left: 0em; margin-right: 0; width: 100%;}
.action input.signup {width: 91%; float:left;}
.contact input.name,
.contact input.signup,
.contact textarea.comments {width: 100%; float: left;}
#formMessages {
    color: #666666;
    margin: 1em auto 0;
}
hr.dashed {
    display: inline-block;
    border: 0;
    border-top: 1px dashed #c8c8c8;
    margin: 0 0 .25em 0;
    padding: 0;
    width: 70%;
}

hr.dashed2 {
    display: inline-block;
    border: 0;
    border-top: 0.5px solid #E8E8E8;
    margin: 0 0 .25em 0;
    padding: 0;
	margin-top: 2em;
	margin-bottom: 2em;
    width: 100%;
}

hr.dashed4 {
    display: inline-block;
    border: 0;
    border-top: 0.5px solid #E8E8E8;
    margin-bottom: -2em;
    padding-bottom: -2em;
    width: 100%;
}

hr.dashed2-invisible {
    display: inline-block;
    border: 0;
    border-top: 0.5px solid #FFFFFF;
    margin: 0 0 .25em 0;
    padding: 0;
	margin-top: 2em;
	margin-bottom: 2em;
    width: 100%;
}

hr.dashed3 {
    display: inline-block;
    border: 0;
    margin: 0 0 .25em 0;
    padding: 0;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
    width: 100%;
}

hr_new {
    border: 0;
    border-top: 1px #c8c8c8;
    width: 70%;
	margin-bottom: 0px;
	margin-top: 0px;
}

.company {
    font-family: "ff-meta-serif-web-pro", serif;
    font-weight: 700;
    text-transform: none;
	font-size: 1.125em;
    text-align: center;
}
.phone, .phone a, .address {
    font-family: "ff-meta-serif-web-pro", serif;
	font-style: normal;
	font-weight: 500;
	font-size: 1.125em;
    text-align: center;
    text-decoration: none;
    color: inherit;
}
.website a {
    color: #dd971a;
    font-family: "brandon-grotesque",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 1em;
    text-transform: uppercase;
	letter-spacing: 3px;
	display: block;
	text-align: center;
	text-decoration: none;
	-webkit-backface-visibility: hidden; /*prevents safari flicker*/-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;
}
.website a:hover {color: #222222;}
/* PLACEHOLDER */
[placeholder]:focus::-webkit-input-placeholder {
  transition: opacity 0.2s 0.2s ease; 
  opacity: 0;
}
/* HTML5 placeholder text in input fields has (in the browsers implementing it so far) a light gray color. To style it, you'll need vendor prefix CSS properties. */
::-webkit-input-placeholder {color: rgb(255,255,255);font-family: "brandon-grotesque", sans-serif;}
:-moz-placeholder { /* Firefox 18- */color: rgb(255,255,255);font-family: "brandon-grotesque", sans-serif;}
::-moz-placeholder {  /* Firefox 19+ */color: rgb(255,255,255);font-family: "brandon-grotesque", sans-serif;}
:-ms-input-placeholder {  color: rgb(255,255,255);font-family: "brandon-grotesque", sans-serif;    }
/* ---- 480 ( + ) smartphones ---- */
@media screen and (min-width: 30em){ /* 480px */
.action input.name, 
.action input.signup {width: 30%;}
.action input.name {margin-left: 2.5em; margin-right: .75em;}
.action input.signup {float:none;}
.contact input.name,
.contact input.signup {width: 48%;}
.contact input.name {margin-right: 4%;}
hr.dashed {width: 45%; margin: 0 0 .5em 0;}
.website {font-size: 1.25em}
}
/* ---- 600 ( + ) ---- */
@media screen and (min-width: 37.5em){ /* 600px */
hr.dashed {width: 30%;}
}
/* ---- 768 ( + ) ---- */
@media screen and (min-width: 48em){ /* 768px */
.action input.name, 
.action input.signup {width: 25%;}
hr.dashed {width: 32%;}
}
/* ---- 960 ( + ) large desktop ---- */
@media screen and (min-width: 60em){ /* 960px */
.action input.name, 
.action input.signup {width: 20%; margin: 0 0 0 0;}
.action input.name {margin-left: 2.3em; margin-right: .75em}
hr.dashed {width: 25%;margin: 0 0 1.5em 0;}
.website {font-size: 1.3em}
}

/* ================================================================================
   COLLAGE
   ================================================================================ */
 
 /* ---- base (all) ---- */  
.collage {
    background: transparent; 
    height: 16.75em /* 268px */;
    margin: 0 auto;
}
/* ---- 480 ( + ) smartphones ---- */
@media screen and (min-width: 30em){ /* 480px */
.collage {height: 25.1875em /* 403px */;}
}
/* ---- 600 ( + ) ---- */
@media screen and (min-width: 37.5em){ /* 600px */
.collage {height: 31.4375em /* 503px */;}
}
/* ---- 768 ( + ) ---- */
@media screen and (min-width: 48em){ /* 768px */
.collage {height: 40.25em /* 644px */;}
}
/* ---- 960 ( + ) large desktop ---- */
@media screen and (min-width: 60em){ /* 960px */
.collage {height: 50.3125em /* 805px */;}
}


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

/* ---- base (all) ---- */   
.footer {background: #222222;margin: 0 auto;color: rgb(138,134,128); /* gray */}

.footer_black {background: #000000;margin: 0 auto;color: rgb(138,134,128); /* gray */}

/* FOOTER TEXT
   ======================== */
/* ---- base (all) ---- */ 
.footer p {
    font-weight: 500;
    font-style: normal;
    font-size: 0.875em; /* 14px */
    text-align: center;
}
.footer p a {
    font-weight: 500;
    font-style: italic;
    color: rgb(138,134,128); /* gray */
    text-decoration: none;
	outline: 0;
}
.footer p a:hover {text-decoration: none; color: #ffffff;}

/* ---- 960 ( + ) large desktop ---- */
@media screen and (min-width: 60em){ /* 960px */
.footer p {text-align: center;}
}
/* PLACEHOLDER */
/*input:focus::-webkit-input-placeholder {color: transparent;}*/
[placeholder]:focus::-webkit-input-placeholder {
  transition: opacity 0.2s 0.2s ease; 
  opacity: 0;
}
/* HTML5 placeholder text in input fields has (in the browsers implementing it so far) a light gray color. To style it, you'll need vendor prefix CSS properties. */
::-webkit-input-placeholder {color: rgb(138,134,128);font-family: "brandon-grotesque", sans-serif;}
:-moz-placeholder { /* Firefox 18- */color: rgb(138,134,128);font-family: "brandon-grotesque", sans-serif;}
::-moz-placeholder {  /* Firefox 19+ */color: rgb(138,134,128);font-family: "brandon-grotesque", sans-serif;}
:-ms-input-placeholder {  color: rgb(138,134,128);font-family: "brandon-grotesque", sans-serif;    }

.footer_black p {
    font-weight: 500;
    font-style: normal;
    font-size: 0.875em; /* 14px */
    text-align: center;
}
.footer_black p a {
    font-weight: 500;
    font-style: italic;
    color: rgb(138,134,128); /* gray */
    text-decoration: none;
	outline: 0;
}
.footer_black p a:hover {text-decoration: none; color: #ffffff;}

/* ---- 960 ( + ) large desktop ---- */
@media screen and (min-width: 60em){ /* 960px */
.footer_black p {text-align: center;}
}
/* PLACEHOLDER */
/*input:focus::-webkit-input-placeholder {color: transparent;}*/
[placeholder]:focus::-webkit-input-placeholder {
  transition: opacity 0.2s 0.2s ease; 
  opacity: 0;
}
/* HTML5 placeholder text in input fields has (in the browsers implementing it so far) a light gray color. To style it, you'll need vendor prefix CSS properties. */
::-webkit-input-placeholder {color: rgb(138,134,128);font-family: "brandon-grotesque", sans-serif;}
:-moz-placeholder { /* Firefox 18- */color: rgb(138,134,128);font-family: "brandon-grotesque", sans-serif;}
::-moz-placeholder {  /* Firefox 19+ */color: rgb(138,134,128);font-family: "brandon-grotesque", sans-serif;}
:-ms-input-placeholder {  color: rgb(138,134,128);font-family: "brandon-grotesque", sans-serif;    }

/* FOOTER EMAIL SIGNUP
   ======================== */
/* ---- base (all) ---- */ 
.footer button {
    border: 0;
    width: 26px;
    height: 27px;
    background: transparent url("../img/global/arrow-input.png") right center no-repeat;		
    background-image: -webkit-linear-gradient(transparent, transparent), url("../img/global/arrow-input.svg");
    background-image: linear-gradient(transparent, transparent), url("../img/global/arrow-input.svg");
}
input.signup {
    background-color: rgb(34,34,34);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.8em 1em 0.6em 1em;
    font-family: "brandon-grotesque", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.0625em; /* 1px */
    font-size: 0.8125em;
    color: rgb(138,134,128); /* gray */
    width: 85%;
    width: 75%\9; /* IE8 and below */  
}
/* PLACEHOLDER */
/*input:focus::-webkit-input-placeholder {color: transparent;}*/
[placeholder]:focus::-webkit-input-placeholder {
  transition: opacity 0.2s 0.2s ease; 
  opacity: 0;
}
/* HTML5 placeholder text in input fields has (in the browsers implementing it so far) a light gray color. To style it, you'll need vendor prefix CSS properties. */
::-webkit-input-placeholder {color: rgb(138,134,128);font-family: "brandon-grotesque", sans-serif;}
:-moz-placeholder { /* Firefox 18- */color: rgb(138,134,128);font-family: "brandon-grotesque", sans-serif;}
::-moz-placeholder {  /* Firefox 19+ */color: rgb(138,134,128);font-family: "brandon-grotesque", sans-serif;}
:-ms-input-placeholder {  color: rgb(138,134,128);font-family: "brandon-grotesque", sans-serif;    }

/* =========================
   SOCIAL MEDIA
============================ */  

.wrap{
  margin: 0 auto;
  padding: 1%;
  width: 20em;
    font-family: "brandon-grotesque", sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 0.95em;
    text-transform: uppercase;
	letter-spacing: 1px;
}

.wrap_footer_black{
  margin: 0 auto;
  padding: 1%;
  width: 20em;
    font-family: "brandon-grotesque", sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 0.95em;
    text-transform: uppercase;
	letter-spacing: 1px;
}

.wrap_footer_black div{
  display: inline-block;
  background-color: #000;
}

.wrap div{
  display: inline-block;
}

.icon{
  background-color:#222;
  background-repeat:no-repeat;
  background-position:center center;
  border-radius: 25px;
  height: 3.0em;
  width: 3.0em;
  -webkit-transition: background-color 0.4s ease;
  -moz-transition: background-color 0.4s ease;
  -ms-transition: background-color 0.4s ease;
  -o-transition: background-color 0.4s ease;
  transition: background-color 0.4s ease;
}

.icon_black{
  background-color:#000;
  background-repeat:no-repeat;
  background-position:center center;
  border-radius: 25px;
  height: 3.0em;
  width: 3.0em;
  -webkit-transition: background-color 0.4s ease;
  -moz-transition: background-color 0.4s ease;
  -ms-transition: background-color 0.4s ease;
  -o-transition: background-color 0.4s ease;
  transition: background-color 0.4s ease;
}

.goof{
  -webkit-transition: all 0.4s cubic-bezier(0,2,0,2);
  -moz-transition: all 0.4s cubic-bezier(0,2,0,2);
  -ms-transition: all 0.4s cubic-bezier(0,2,0,2);
  -o-transition: all 0.4s cubic-bezier(0,2,0,2);
  transition: all 0.4s cubic-bezier(0,2,0,2);
}

.goof:hover{
  background-size:35%;
}

.icon a{
  display: block;
  height: 100%;
  width: 100%;
}

.facebook{
  background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iLTAuNyAtMC42IDEzNCAyNzgiPjxzdHlsZT4uc3R5bGUwe2ZpbGw6CSNGRkZGRkY7fTwvc3R5bGU+PHBhdGggZD0iTTgyLjYgNThjMCAwLTAuNy01LjUgNC40LTkuNmM1LjEtNCA5LjktMy43IDkuOS0zLjdjMTIuOS0xLjYgMjkuOCAyLjYgMjkuOCAyLjZsNS45LTQyLjdjMCAwLTU5LjctMTQuMy04NS45IDcuMkMyOS41IDI0LjUgMjkuMyA0My43IDI5LjMgNDMuN3Y0Ny43SDAuMmwtMC4yIDQyaDI5LjRsLTEuMSAxNDMuMWw1Mi44IDAuM2wwLjMtMTQzLjRoNDMuMWwyLjktNDEuOWwtNDUuMS0wLjJMODIuNiA1OHoiIGNsYXNzPSJzdHlsZTAiLz48L3N2Zz4=);
  background-size:25%;  
}

.facebook:hover{
  background-color:#3664A2;
}

.lectio{
  background-image:url(../img/lectio.png);
  background-size:30%;
}

.lectio:hover{
  background-color:#BDC8D0;

}

.instagram{
  background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iLTAuOSAtMC44IDYxIDYxIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iI0ZGRkZGRiIgZD0iTTcuNywwaDQ0LjVjNC4yLDAsNy43LDMuNSw3LjcsNy43djQ0LjVjMCw0LjItMy41LDcuNy03LjcsNy43SDcuN2MtNC4yLDAtNy43LTMuNS03LjctNy43VjcuN0MwLDMuNSwzLjUsMCw3LjcsMEw3LjcsMHogTTQzLjYsNi43Yy0xLjUsMC0yLjcsMS4yLTIuNywyLjd2Ni41YzAsMS41LDEuMiwyLjcsMi43LDIuN2g2LjhjMS41LDAsMi43LTEuMiwyLjctMi43VjkuNGMwLTEuNS0xLjItMi43LTIuNy0yLjdINDMuNkw0My42LDYuN3ogTTUzLjEsMjUuM2gtNS4zYzAuNSwxLjYsMC44LDMuNCwwLjgsNS4xYzAsMTAtOC4zLDE4LTE4LjYsMThzLTE4LjYtOC4xLTE4LjYtMThjMC0xLjgsMC4zLTMuNSwwLjgtNS4xSDYuN3YyNS4zQzYuNyw1Miw3LjcsNTMsOSw1M2g0MS43YzEuMywwLDIuNC0xLjEsMi40LTIuNFYyNS4zTDUzLjEsMjUuM3ogTTMwLDE4LjJjLTYuNiwwLTEyLDUuMi0xMiwxMS43YzAsNi40LDUuNCwxMS43LDEyLDExLjdzMTItNS4yLDEyLTExLjdDNDIsMjMuNCwzNi43LDE4LjIsMzAsMTguMnoiLz48L3N2Zz4=);
  background-size:55%; 
}

.instagram:hover{
  background-color:#C667E3

}

.vimeo{
  background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjQxcHgiIGhlaWdodD0iMzZweCIgdmlld0JveD0iLTAuNzM4IC0wLjU2NiA0MSAzNiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAtMC43MzggLTAuNTY2IDQxIDM2IiB4bWw6c3BhY2U9InByZXNlcnZlIj48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMzkuOTgsNy45ODNjLTAuMTc4LDMuODg2LTIuODk3LDkuMjA1LTguMTU3LDE1Ljk2Yy01LjQzOCw3LjA1LTEwLjA0LDEwLjU3NS0xMy44MDMsMTAuNTc1Yy0yLjMzMywwLTQuMzA3LTIuMTUtNS45MTctNi40NTJjLTEuMDc3LTMuOTQ5LTIuMTUxLTcuODktMy4yMjgtMTEuODM1Yy0xLjE5Ni00LjMwNC0yLjQ4MS02LjQ1NS0zLjg1Ni02LjQ1NWMtMC4yOTcsMC0xLjM0NSwwLjYyOC0zLjEzNSwxLjg4M0wwLDkuMjM5YzEuOTczLTEuNzMzLDMuOTE2LTMuNDY2LDUuODI5LTUuMTk5YzIuNjI2LTIuMjcyLDQuNTk5LTMuNDY3LDUuOTE0LTMuNTg2YzMuMTA5LTAuMjk5LDUuMDIyLDEuODI0LDUuNzM5LDYuMzY2YzAuNzc2LDQuOTAxLDEuMzE1LDcuOTQ4LDEuNjEyLDkuMTQyYzAuODk5LDQuMDY3LDEuODgzLDYuMDk0LDIuOTYsNi4wOTRjMC44MzYsMCwyLjA5Mi0xLjMxMSwzLjc2NC0zLjk0MmMxLjY3NS0yLjYyOSwyLjU3LTQuNjMsMi42ODgtNi4wMDVjMC4yMzgtMi4yNzEtMC42NTctMy40MDgtMi42ODgtMy40MDhjLTAuOTU1LDAtMS45NDMsMC4yMS0yLjk1NywwLjYyN2MxLjk3My02LjM5Miw1LjczNS05LjUwMiwxMS4yOTQtOS4zMjFDMzguMjc3LDAuMTI3LDQwLjIxOSwyLjc4NiwzOS45OCw3Ljk4MyIvPjwvc3ZnPg==);
  background-size:65%; 
}

.vimeo:hover{
  background-color:#1ab7ea;
}

/* =========================
   SOCIAL MEDIA
============================ */  
a:hover {
  text-decoration: none; outline: 0;
}

header,
.demo,
.demo p {
  margin: 0em 0;
  text-align: center;
}

/* =========================
   TOOL TIPS
============================ */  
/* Base styles for the element that has a tooltip */
[data-tooltip],
.tooltip {
  position: relative;
  cursor: pointer;
}

/* Base styles for the entire tooltip */
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after {
  position: absolute;
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: 
      opacity 0.2s ease-in-out,
        visibility 0.2s ease-in-out,
        -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
    -moz-transition:    
        opacity 0.2s ease-in-out,
        visibility 0.2s ease-in-out,
        -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
    transition:         
        opacity 0.2s ease-in-out,
        visibility 0.2s ease-in-out,
        transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform:    translate3d(0, 0, 0);
  transform:         translate3d(0, 0, 0);
  pointer-events: none;
}

/* Show the entire tooltip on hover and focus */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

/* Base styles for the tooltip's directional arrow */
.tooltip:before,
[data-tooltip]:before {
  z-index: 1001;
  border: 6px solid transparent;
  background: transparent;
  content: "";
}

/* Base styles for the tooltip's content area */
.tooltip:after,
[data-tooltip]:after {
  z-index: 1000;
  padding: 5px;
  width: 150px;
	border-radius: 5px;
  background-color: hsla(0, 0%, 20%, 0.9);
  color: #fff;
  content: attr(data-tooltip);
  font-size: 14px;
  font-family: "brandon-grotesque",sans-serif;
  font-style: normal;
  line-height: 1.2;
  text-align: center;
}

/* Directions */

/* Top (default) */
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after,
.tooltip-top:before,
.tooltip-top:after {
  bottom: 100%;
  left: 50%;
}

[data-tooltip]:before,
.tooltip:before,
.tooltip-top:before {
  margin-left: -6px;
  margin-bottom: -12px;
  border-top-color: #000;
  border-top-color: hsla(0, 0%, 20%, 0.9);
}

/* Horizontally align top/bottom tooltips */
[data-tooltip]:after,
.tooltip:after,
.tooltip-top:after {
  margin-left: -80px;
}

[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after,
.tooltip-top:hover:before,
.tooltip-top:hover:after,
.tooltip-top:focus:before,
.tooltip-top:focus:after {
  -webkit-transform: translateY(-12px);
  -moz-transform:    translateY(-12px);
  transform:         translateY(-12px); 
}

/* Left */
.tooltip-left:before,
.tooltip-left:after {
  right: 100%;
  bottom: 50%;
  left: auto;
}

.tooltip-left:before {
  margin-left: 0;
  margin-right: -12px;
  margin-bottom: 0;
  border-top-color: transparent;
  border-left-color: #000;
  border-left-color: hsla(0, 0%, 20%, 0.9);
}

.tooltip-left:hover:before,
.tooltip-left:hover:after,
.tooltip-left:focus:before,
.tooltip-left:focus:after {
  -webkit-transform: translateX(-12px);
  -moz-transform:    translateX(-12px);
  transform:         translateX(-12px); 
}

/* Bottom */
.tooltip-bottom:before,
.tooltip-bottom:after {
  top: 100%;
  bottom: auto;
  left: 50%;
}

.tooltip-bottom:before {
  margin-top: -12px;
  margin-bottom: 0;
  border-top-color: transparent;
  border-bottom-color: #000;
  border-bottom-color: hsla(0, 0%, 20%, 0.9);
}

.tooltip-bottom:hover:before,
.tooltip-bottom:hover:after,
.tooltip-bottom:focus:before,
.tooltip-bottom:focus:after {
  -webkit-transform: translateY(12px);
  -moz-transform:    translateY(12px);
  transform:         translateY(12px); 
}

/* Right */
.tooltip-right:before,
.tooltip-right:after {
  bottom: 50%;
  left: 100%;
}

.tooltip-right:before {
  margin-bottom: 0;
  margin-left: -12px;
  border-top-color: transparent;
  border-right-color: #000;
  border-right-color: hsla(0, 0%, 20%, 0.9);
}

.tooltip-right:hover:before,
.tooltip-right:hover:after,
.tooltip-right:focus:before,
.tooltip-right:focus:after {
  -webkit-transform: translateX(12px);
  -moz-transform:    translateX(12px);
  transform:         translateX(12px); 
}

/* Move directional arrows down a bit for left/right tooltips */
.tooltip-left:before,
.tooltip-right:before {
  top: 3px;
}

/* Vertically center tooltip content for left/right tooltips */
.tooltip-left:after,
.tooltip-right:after {
  margin-left: 0;
  margin-bottom: -16px;
}


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

MAYA images

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

.maya{
   max-width: 100%;
   height: auto;
}