html {-webkit-tap-highlight-color: transparent;  }
body { background: url(http://www.mariahmcclain.com/images/mainback2_r.jpg); background-repeat: repeat;  margin: 0;  display: flex;  flex-direction: column; }
html {  margin: 0; min-height: 100%; font-size: 9.5px; }
html, body { height: 100%;  }

@font-face {
    font-family: 'Trajan Pro 3';
    src: url('fonts/TrajanPro3-Regular.eot');
    src: url('fonts/TrajanPro3-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/TrajanPro3-Regular.woff2') format('woff2'),
        url('fonts/TrajanPro3-Regular.woff') format('woff'),
        url('fonts/TrajanPro3-Regular.ttf') format('truetype'),
        url('fonts/TrajanPro3-Regular.svg#TrajanPro3-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fantasy';
    src: url('fonts/Fantasy-.eot');
    src: url('fonts/Fantasy-.eot?#iefix') format('embedded-opentype'),
        url('fonts/Fantasy-.woff2') format('woff2'),
        url('fonts/Fantasy-.woff') format('woff'),
        url('fonts/Fantasy-.ttf') format('truetype'),
        url('fonts/Fantasy-.svg#Fantasy-') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/*
@font-face {
    font-family: 'Desire';
    src: url('fonts/Desire-Pro.eot');
    src: url('fonts/Desire-Pro.eot?#iefix') format('embedded-opentype'),
        url('fonts/Desire-Pro.woff2') format('woff2'),
        url('fonts/Desire-Pro.woff') format('woff'),
        url('fonts/Desire-Pro.ttf') format('truetype'),
        url('fonts/Desire-Pro.svg#Desire-Pro') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fantasy One';
    src: url('fonts/FantasyOne.eot');
    src: url('fonts/FantasyOne.eot?#iefix') format('embedded-opentype'),
        url('fonts/FantasyOne.woff2') format('woff2'),
        url('fonts/FantasyOne.woff') format('woff'),
        url('fonts/FantasyOne.ttf') format('truetype'),
        url('fonts/FantasyOne.svg#FantasyOne') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
*/

adiv { border: 2px solid #0e0; }

.clearb { clear: both; }
.w100p { width: 100% !important; }

.main_content { flex: 1 0 auto; overflow: hidden; }
.content-inside { padding: 0px; max-width: 1024px; margin: 0 auto; }

.button_medium, .button_mediumi { background-color: #daa520; font-size: 3.0rem; font-weight: bold; font-family: Garamond; padding: 1.0vw 3.0vw; }
.button_medium { display: block; }
.button_mediumi { display: inline-block; box-shadow: 0 0 3px rgba(0,0,0,0.4); }
a.button_medium, a.button_mediumi { text-decoration: none; color: #228; white-space: nowrap; }

.bigheader, .bigfooter { background: url(http://www.mariahmcclain.com/images/headerback.jpg); background-position: center; background-color: #060; border: 0.8vw solid #59022B; }
.bigheader { border-width: 0 0 0.5vw 0; width: 100%; height: 6.0vx; max-height: 60px; vertical-align: middle;  }
.smallheader { widtah: 102.0vw; max-width: 1024px; margin: auto;  }
.headerlogo { display: table-cell; font-family: 'Trajan Pro 3'; font-size: 4.0rem; color: #daa520; padding: 1.0vw; text-shadow: 0 0 16px rgba(0,0,0,0.75);  margin: 0.7vw 0; } 
.headerlogo a { text-decoration: none; color: #daa520; }
.headerlogo img { width: 36.8vw; max-width: 368px; height: auto; margin: 1.0vw; vertical-align: middle;  }

.bigfooter {  flex-shrink: 0; margin-top: 2.0vw;  border-width: 0.5vw 0 0 0;  }
.smallfooter {  widtha: 102.0vw; max-width: 1024px; margin: auto; }
.footer-container  { amin-height: 12.5vw; padding: 1.5vw 1.5vw; }

.titlemenu_holder { text-align: center; vertical-align: middle; padding-left: 9.0vw; display: table-cell;  }
.titlemenu_item { font-weight: bold; color: #eee; font-family: "Trajan Pro 3", "Times New Roman" ; font-style: italic; margin: auto 1.0vw; display: inline-block; }
.titlemenu_item a { color: #0047ab; color: #daa520; color: #dcdcdc; text-decoration: none;  font-size: 2.4rem; font-size: 2.0rem;}

.fancyblock_big { background-color: #000; height: 34.0vw; max-height: 340px; }
.fancyblock_small { max-width: 1024px; margin: auto; display: flex; align-items: center; }
.fancyblock_image { height: 30.0vw; max-height: 300px; float: left;   }
.fancyblock_textblockholder { text-align: center; width: 100%; }
.fancyblock_textblock { font-size: 3.3rem; width: 90%; line-height: 130%; font-style: italic; font-family: serif; color: #d66; margin: auto; }

.sectionheader, .sectionheaderi { text-align: center; }
.sectionheader span, .sectionheaderi span { font-size: 3.4rem; color: #1E0359;  display: inline-block;  font-weight: bold; border: 3px double #1E0359; border-width: 0 0 3px 0;  padding: 0 3.0vw; text-transform: uppercase; font-family: "Trajan Pro 3", "Times New Roman"; }
.sectionheader span { margin: 2.0vw auto; }
.sectionheaderi span { margin: 2.0vw auto 0 auto; }
.sectionheader2 { font-size: 4.0rem; font-family: 'Fantasy'; color: #222; text-align: center; inline-block; margin: 2.0vw auto;  font-weight: bold; font-style: italic; }
.sectionheader_sub { font-size: 25px; font-family: 'Times New Roman'; font-style: italic; text-align: center; margin-bottom: 2.0vw; }

.divider { background: url(http://www.mariahmcclain.com/images/divider.png) no-repeat; background-size: cover;  display: inline-block; vertical-align: middle;  width: 65.2vw; max-width: 652px; height: 6.7vw; max-height: 67px;  }

.biobox_holder { width: 90.0vw; max-width: 900px; margin: auto; text-align: left; overflow-x: hidden; }
.biobox_cell1 { width: 45.0vw; max-width: 450px; }
.biobox_cell2 { vertical-align: bottom; position: relative; width: 44.0vw; max-width: 440px; }
.biobox_text { font-size: 2.3rem; width: 45.0vw; max-width: 450px; font-family: Times New Roman; display: inline-block; vertical-align: top; }
.biobox_smoke { position: absolute !important; top: 6.0vw !important; left: 9.0vw !important; }
.biobox_img_holder {  width: 44.0vw; max-width: 440px; bottom:0; }
.biobox_img { width: 100%; }

.publist_holder { width: 90%; max-width: 700px; margin: auto; vertical-align: top; }
.publist_holder_sub { display: inline-block; vertical-align: top; width: 45%; margin-right: 2.0vw; }
.publist_holder_header { font-size: 3.4rem; font-weight: bold; font-family: 'Times New Roman', serif; color: #0047ab; text-shadow: 0 0 1.3rem rgba(0,30,0,0.5); texta-align: center; margin-bottom: 1.0vw;  }
.publist_item { font-size: 1.9rem; margin-bottom: 2.0vw; }
.publist_title { color: #59022B; font-weight: bold; font-size: 120%; }
.publist_pub { font-style: italic; font-weight: 600; }
.publist_date { font-style: italic; }

.previewbox_holder { width: 80.0vw; max-width: 600px; margin: auto; }
.previewbox_image_holder {  width: 13.0vw; max-width: 130px; aheight: 200vw; amax-height: 200px; vertical-align: top; display: table-cell;   }
.previewbox_image {  width: 13.0vw; max-width: 130px; height: auto;    }
.previewbox_header { font-size: 2.9rem; color: #3c0294; text-shadow: -1px 1px 0 rgba(0,0,0,0.25); font-weight: bold; font-family: Georgia;  }
.previewbox_text_holder { padding-left: 1.0vw;  vertical-align: top; display: table-cell; }
.previewbox_text { font-size: 1.9rem; font-family: Times New Roman; line-height: 110%; }

.booklistbox_title { font-family: 'Fantasy'; font-size: 4.0rem; text-align: center; }
.booklistbox_holder { width: 80%; max-width: 800px; margin: auto; margin-bottom: 2.0vw; display: table; }
.booklistbox_image_holder {  vertical-align: top; display: table-cell;   }
.booklistbox_image {  width: 20.0vw; max-width: 200px; height: auto;   }
.booklistbox_header { font-size: 2.9rem; color: #3c0294; text-shadow: -1px 1px 0 rgba(0,0,0,0.25); font-weight: bold; font-family: Georgia; margin-bottom: 0.5vw;  }
.booklistbox_text_holder { padding-left: 1.0vw;  vertical-align: top; display: table-cell; }
.booklistbox_text { font-size: 1.9rem; font-family: Times New Roman; line-height: 110%; }

.booklisting_holder { width: 92.0vw; max-width: 920px; margin: auto;  }
.booklisting_title_holder { background-color: #3c0294; margin-bottom: 1.5vw; posiation: relative;   }
.booklisting_title { margin-left: 40.0vw; font-size: 2.5rem; text-align: center; color: #bcbcbc; color: #daa520; text-shadow: -3px 3px 0 rgba(0,0,0,0.25); font-weight: bold; font-family: "Trajan Pro 3", Georgia; padding: 0.8vw 1.0vw; }
.booklisting_cover { width: 40.0vw; max-width: 400px; height: 56.0vw; max-height: 560px; margin: 0 1.5vw 1.5vw 0; flsoat: left; text-align: center; position: relative;  }
.booklisting_cover img { width: 38.0vw; max-width: 380px; height: auto; margin: auto; }
.booklisting_description { font-size: 2.1rem; font-family: Times New Roman; line-height: 130%;  }
.booklisting_description_head { font-size: 2.0rem; font-family: arial; font-weight: bold; }

.booklisting_infobox { width: 35.0vw; max-width: 350px; border: 5px solid #daa520; background-color: #fac540; margin: auto; 
-webkit-border-radius: 0.5vw;
-khtml-border-radius: 0.5vw;
-moz-border-radius: 0.5vw;
border-radius: 0.5vw;
 }
.booklisting_infobox_sub { text-align: left;  font-size: 1.6rem; font-family: georgia, arial; margin: 1.0vw; } 
.booklisting_infobox_item { font-weight: bold; }

.booklisting_available_holder { width: 70.0vw; max-width: 700px; margin: auto; text-align: center; font-size: 2.0rem; color: #222; background-color: #ececec; border: 0.3vw solid #59022B; font-weight: bold; }
.booklisting_available_header { font-size: 3.0rem; font-family: 'Trajan Pro 3', 'Times New Roman'; color: #dcdcdc; background-color: #59022B; padding: 0.6vw 0; }
.booklisting_available_item_holder { text-align: center; padding-bottom: 1.0vw;   }
.booklisting_available_item { display: inline-block; width: 30.0vw; margin-bottom: 2.0vw; }

.bookreviews_bigholder { width: 95.0vw; max-width: 950px; text-align: center; margin: auto; }
.bookreviews_bigholder_col { width: 45%; display: inline-block; vertical-align: top; margin: 0 1.0vw; }
.bookreviews_smallholder { width: 100% }
.bookreviews_smallholder td { padding-bottom: 4.0vw; }

.quote { font-family: Georgia, Garamond, Serif; font-size: 2.0rem; line-height: 3.0vw; position: relative; text-align: center; display: block; }
.quote::before { content: "“"; font-size: 5.0rem; position: absolute; top: 0; left: 0; }
.quote::after { content: "”"; font-size: 5.0rem; position: absolute; bottom: 0px; right: 0; }
.attribution { display: block; font-size: 1.3rem;  font-family: Times New Roman; letter-spacing: 0.5px; line-height: 1.5vw; text-transform: uppercase; text-align: right; font-weight: 600; margin-top: 1.0vw; }	

.ethereal_welcome { font-family: 'Fantasy'; font-size: 4.0rem; text-align: center;  color: #59022B; font-weight: bold; margin-bottom: 2.0vw; }
.ethereal_welcome_sub { font-size: 2.4rem; font-family: 'Times New Roman'; width: 70%; text-align: center; margin: auto;  margin-bottom: 2.0vw; }

.ethereal_buttons_holder {  display: table; margin: auto; border-spacing: 1.0vw; }
.ethereal_buttons_holder_row {  display: table-row; }

.jumpto_list { display: table; width: 90%; max-width: 500px; margin: 2.0vw auto;   }
.jumpto_row { display: table-row; }
.jumpto_button { display: table-cell;  }
.jumpto_desc { display: table-cell; font-size: 2.1rem; font-family: 'Fantasy'; text-align: center; vertical-align: middle; }

.glossary_list { width: 90%; max-width: 800px; margin: auto; display: table; border-spacing: 0 1.0vw }
.glossary_item { display: table-row; padding-bottom: 2.0vw; }
.glossary_name { display: table-cell; border: 1px solid #ccb; border-width: 0 0 0.2vw 0; }
.glossary_name_sub { font-size: 1.9rem; font-weight: bold; font-family: 'Trajan Pro 3';  transition: all .6s ease-in-out, text-shadow .9s linear;    }
.glossary_name_sub:hover { transform: scale(1.1); text-shadow: 0 0 5px rgba(255,100,0,1); }
.glossary_desc { display: table-cell; font-size: 2.0rem; font-family: 'Times New Roman';  padding-bottom: 1.0vw; padding-left: 2.0vw; border: 1px solid #ccb; border-width: 0 0 0.2vw 0; } 

.cast_list { width: 90%; max-width: 800px; margin: auto; display: table; border-spacing: 0 1.0vw; }
.cast_item { display: table-row; padding-bottom: 2.0vw; }
.cast_name { display: table-cell; border: 1px solid #ccb; border-width: 0 0 0.2vw 0; }
.cast_name_sub { font-size: 1.9rem; font-weight: bold; font-family: 'Trajan Pro 3';  transition: text-shadow .2s linear; white-space: nowrap;  }
.cast_name_sub:hover { text-shadow: -0.3vw 0.3vw 0 rgba(50,25,0,.4); }
.cast_desc { display: table-cell; font-size: 2.0rem; font-family: 'Times New Roman';  padding-bottom: 1.0vw; padding-left: 2.0vw; border: 1px solid #ccb; border-width: 0 0 0.2vw 0; } 
.cast_high { font-style: italic; } 

.places_list { width: 90%; max-width: 800px; margin: auto; display: table; border-spacing: 0 1.0vw }
.places_item { display: table-row; padding-bottom: 2.0vw; }
.places_name { display: table-cell; border: 1px solid #ccb; border-width: 0 0 0.2vw 0; }
.places_name_sub { font-size: 1.9rem; font-weight: bold; font-family: 'Trajan Pro 3';  transition: all .6s ease-in-out;    }
.places_name_sub:hover { transform: skew(0deg, -2deg) }
.places_desc { display: table-cell; font-size: 2.0rem; font-family: 'Times New Roman';  padding-bottom: 1.0vw; padding-left: 2.0vw; border: 1px solid #ccb; border-width: 0 0 0.2vw 0; } 

.contactform_largeholder { background: url(http://www.mariahmcclain.com/images/wolfback.jpg)  no-repeat; background-size: cover;  width: 100%; height: 62.7vw; max-height: 627px;  }
.contactform_largeholder_sub { width: 50%; max-width: 500px; height: 50.0vw; max-height: 500px; margin-left: 47%; display: block; }
.contactform_text { width: 100%; padding-top: 7.0vw;  margin-bottom: 2.0vw; font-weight: bold; font-size: 2.5rem; color: #daa520; text-align: center; }
.contactform_button_holder { text-align: right; padding: 0.9vw; }
.contactform_button { display: inline-block; font-size: 2.0rem; font-family: 'Fantasy'; font-weight: bold; padding: 1.0vw 2.0vw; color: #eee; background-color: #59022B;  border: 0; box-shadow: 0 0 1.0vw rgba(0,0,0,0.9); }
.contactform_home { text-align: center; padding-top: 2.0vw; }
.contactform_holder { width: 50%; width: 100%;  }
.contactform_row { display: table; width: 100%; border-spacing: 0.9vw;}
.contactform_box1 { width: 50%; display: table-cell;  }
.contactform_box2 { display: none;   }
.contactform_box3 { height: 20.0vw; max-height: 200px; ; margin: 0.9vw 0.9vw;   }
.contactform_holder input[type = "text"] { font-size: 1.7rem; font-family: 'Times New Roman'; padding: 8px 16px; border-radius: 5px; width: 100%;  box-sizing: border-box;}
.contactform_holder textarea  { font-size: 1.7rem; font-family: 'Times New Roman'; padding: 0.8vw 1.6vw; border-radius: 0.5vw; width: 100%;  height: 20.0vw; box-sizing: border-box; }
.contactform_nosend { font-size: 16px; color: #fff; background-color: #922; }

.footer_section_title { font-size: 2.2rem; color: #daa520; text-shadow:  0 0 5px rgba(0,0,0,0.5);  font-weight: bold; margin-bottom: 0; font-family: 'Trajan 3 Pro'; }
.footer_section { font-size: 1.8rem; color: #fff; aline-height: 2.0vw; font-family: 'Fantasy'; display: inline-block; vertical-align: top; margin-left: 3.8vw;  padding-right: 1.8vw;  }
.footer_section .scsl { margin: 4px 0; transition: all .3s ease-in-out;  }
.footer_section .scsl:hover  { transform: scale(1.1);  }
.footer_section a { color: #fff; text-decoration: none; text-shadow: -2px 2px 0 rgba(0,0,0,0.5); }
.footer_copyright { color: #eee; font-size: 1.9rem; margin-top: 1.0vw; margin-left: 2.0vw; }
.footer_copyright a { color: #eee;  text-shadow: -2px 2px 0 rgba(0,0,0,0.5); }

.iconmenu { width: 20px !important; height: 20px !important; background: url(http://www.mariahmcclain.com/images/menu20.png) no-repeat; background-size: cover;  display: inline-block; cursor: pointer; } 
.iconmenuclose { width: 20px !important; height: 20px !important; background: url(http://www.mariahmcclain.com/images/menu_close20.png) no-repeat !important; background-size: cover !important;  display: inline-block !important; cursor: pointer !important; } 

.scrollsidebar_open_div { position: absolute; top: 1.5vw; right: 20px; display: none;  }

.sidebar_list { margin-left: 3.0vw; margin-bottom: 20px; margin-top: 10px; font-size: 19px; font-family: 'Trajan Pro 3'; font-weight: bold; line-height: 170%; }
.sidebar_list a {color: #eee; text-decoration: none; text-shadow: -3px 3px 0 rgba(0,0,0,0.4); }
.sidebar_list_indent { margin-left: 3.0vw; }
.scrollsidebar { width: 300px; background-color: #59022B; border: 5px solid #59022B; color: #eee; position: fixed; z-index: 3; top: 0; right: -320px;  
-webkit-background: radial-gradient(circle, #99426B 0%, #79224B 45%, #59022B 100%);
-moz-background: radial-gradient(circle, #99426B 0%, #79224B 45%, #59022B 100%);
background: radial-gradient(circle, #99426B 0%, #79224B 45%, #59022B 100%);
box-shadow: -0.3vw 0.3vw 0 rgba(0,0,0,0.45); 
    -webkit-transition: right 0.3s;
    -moz-transition: right 0.3s;
    -ms-transition: right 0.3s;
    -o-transition: right 0.3s;
    transition: right 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
-webkit-border-radius: 0.5vw;
-khtml-border-radius: 0.5vw;
-moz-border-radius: 0.5vw;
border-radius: 0.5vw;
}

.scrollsidebar_top { width: 100%; height: 30px; color: #eee; text-align: center; font-size: 1.9rem; font-weight: 700; margin: 0;  padding: 0;  
-webkit-border-top-right-radius: 0.5vw;
-webkit-border-top-left-radius: 0.5vw;
-khtml-border-radius-topright: 0.5vw;
-khtml-border-radius-topleft: 0.5vw;
-moz-border-radius-topright: 0.5vw;
-moz-border-radius-topleft: 0.5vw;
border-top-right-radius: 0.5vw;
border-top-left-radius: 0.5vw;
}

.scrollin { right: 2px; }

.scrollsidebar_top .title { margin-top: 10px; }
.scrollsidebar_close { position: absolute; top: 10px; left: 10px; }
.scrollsidebar_close img {  height: 20px; cursor: pointer; }


/* BUBBLES */
.bubble { position: relative;  font-family: sans-serif; background: #f44; border-radius: 4.0vw; padding: 2.4vw; text-align: center; color: #eee; }
.bubble-bottom-left:before { content: ""; width: 0px; height: 0px; position: absolute; z-index: -1; border-left: 2.4vw solid #f44; border-right: 1.2vw solid transparent; border-top: 1.2vw solid #f44; border-bottom: 2.0vw solid transparent; left: 3.2vw; bottom: -2.9vw; }
.bubble-bottom-right:before { content: ""; width: 0px; height: 0px; position: absolute; z-index: -1; border-right: 2.4vw solid #f44; border-left: 1.2vw solid transparent; border-top: 1.2vw solid #f44; border-bottom: 2.0vw solid transparent; right: 3.2vw; bottom: -2.9vw; }

.bubble-bottom-left.purple1:before {   border-left: 2.4vw solid #240008;   border-top: 1.2vw solid #240008; }
.bubble-bottom-right.purple1:before {   border-right: 2.4vw solid #240008;   border-top: 1.2vw solid #240008; }

.purple1 { 
background: #6300FF; 
background: -webkit-radial-gradient(circle, #6300FF 0%, #4703A6 35%, #240008 100%);
background: -moz-radial-gradient(circle, #6300FF 0%, #4703A6 35%, #240008 100%);
background: radial-gradient(circle, #6300FF 0%, #4703A6 35%, #240008 100%);
}	

.bubble-bottom-left.red1:before {   border-left: 2.4vw solid #002408;   border-top: 1.2vw solid #002408; }
.bubble-bottom-right.red1:before {   border-right: 2.4vw solid #002408;   border-top: 1.2vw solid #002408; }
	
.red1 { 
background: #A60347; 
background: -webkit-radial-gradient(circle, #1F0063 0%, #A60347 35%, #002408 100%);
background: -moz-radial-gradient(circle, #1F0063 0%, #A60347 35%, #002408 100%);
background: radial-gradient(circle, #1F0063 0%, #A60347 35%, #002408 100%);
}	

.bubble-bottom-left.green1:before {   border-left: 2.4vw solid #240008;   border-top: 1.2vw solid #240008; }
.bubble-bottom-right.green1:before {   border-right: 2.4vw solid #240008;   border-top: 1.2vw solid #240008; }
	
.green1 { 
background: #03A647; 
background: -webkit-radial-gradient(circle, #001F63 0%, #03A647 35%, #240008 100%);
background: -moz-radial-gradient(circle, #001F63 0%, #03A647 35%, #240008 100%);
background: radial-gradient(circle, #f01F63 0%, #03A647 35%, #240008 100%);
}	

.bubble-bottom-left.orange1:before {   border-left: 2.4vw solid #000824;   border-top: 1.2vw solid #000824; }
.bubble-bottom-right.orange1:before {   border-right: 2.4vw solid #000824;   border-top: 1.2vw solid #000824; }

.orange1 { 
background: #A64703; 
background: -webkit-radial-gradient(circle, #1F6300 0%, #A64703 35%, #000824 100%);
background: -moz-radial-gradient(circle, #1F6300 0%, #A64703 35%, #000824 100%);
background: radial-gradient(circle, #1F6300 0%, #A64703 35%, #000824 100%);
}	

.bubble-bottom-left.green2:before {   border-left: 2.4vw solid #297B45;   border-top: 1.2vw solid #297B45; }
.bubble-bottom-right.green2:before {   border-right: 2.4vw solid #297B45;   border-top: 1.2vw solid #297B45; }

.green2 { 
background: #297B45;
backgrounda: -webkit-radial-gradient(center, #51C979, #297B45);
backgrounda: -moz-radial-gradient(center, #51C979, #297B45);
background: radial-gradient(ellipse at center, #51a979, #297845);
}	



/* ANIMATiONS */
@-webkit-keyframes fadeIn { from { opacity:0; color: #803; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; color: #803; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; color: #803; } to { opacity:1; } }

@-webkit-keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
@-moz-keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
@keyframes fadeOut { from { opacity:1; } to { opacity:0; } }

.fade-in {
	opacity:0; 
	-webkit-animation:fadeIn ease-in 1; 
	-moz-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;
	-webkit-animation-fill-mode:forwards; 
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
	-webkit-animation-duration:1s;
	-moz-animation-duration:1s;
	animation-duration:1s;
}

.fade-out {
	opacity:1; 
	-webkit-animation:fadeOut ease-in 1; 
	-moz-animation:fadeOut ease-in 1;
	animation:fadeOut ease-in 1;
	-webkit-animation-fill-mode:forwards; 
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
	-webkit-animation-duration:1s;
	-moz-animation-duration:1s;
	animation-duration:1s;
}

.fade-in.one { -webkit-animation-delay: 0.7s; -moz-animation-delay: 0.7s; animation-delay: 0.7s; }
.fade-in.two { -webkit-animation-delay: 1.2s; -moz-animation-delay:1.2s; animation-delay: 1.2s; }
.fade-in.three { -webkit-animation-delay: 1.6s; -moz-animation-delay: 1.6s; animation-delay: 1.6s; }
.fade-in.four { -webkit-animation-delay: 3.0s; -moz-animation-delay: 3.0s; animation-delay: 3.0s; }

.fade-out.four { -webkit-animation-delay: 10.0s; -moz-animation-delay: 10.0s; animation-delay: 10.0s; }

@-webkit-keyframes aslideinleft { 100% { left: 0; } }
@-moz-keyframes aslideinleft { 100% { left: 0; } }
@keyframes aslideinleft { 100% { left: 0; } }

@-webkit-keyframes aslideinright { 100% { right: 0; } }
@-moz-keyframes aslideinright { 100% { right: 0; } }
@keyframes aslideinright { 100% { right: 0; } }


@-webkit-keyframes slideinleft { 
	0% {
		transform: translatex(-20.0vw);
	}
	100% {
		transform: translatex(0px);
	}
}
@-moz-keyframes slideinleft { 
	0% {
		transform: translatex(-20.0vw);
	}
	100% {
		transform: translatex(0px);
	}
}
@keyframes slideinleft { 
	0% {
		transform: translatex(-20.0vw);
	}
	100% {
		transform: translatex(0px);
	}
}


@-webkit-keyframes slideinright { 
	0% {
		transform: translatex(20.0vw);
	}
	100% {
		transform: translatex(0);
	}
}
@-moz-keyframes slideinright { 
	0% {
		transform: translatex(20.0vw);
	}
	100% {
		transform: translatex(0);
	}
}
@keyframes slideinright { 
	0% {
		transform: translatex(20.0vw);
	}
	100% {
		transform: translatex(0);
	}
}


@-webkit-keyframes slideinbottom { 
	0% {
		transform: translatey(20.0vw);
	}
	100% {
		transform: translatey(0);
	}
}
@-moz-keyframes slideinbottom { 
	0% {
		transform: translatey(20.0vw);
	}
	100% {
		transform: translatey(0);
	}
}
@keyframes slideinbottom { 
	0% {
		transform: translatey(20.0vw);
	}
	100% {
		transform: translatey(0);
	}
}


@-webkit-keyframes salideinbottom { 100% { top: 0; } }
@-moz-keyframes aslideinbottom { 100% { top: 0; } }
@keyframes salideinbottom { 100% { top: 0; } }

.leftslideinbox { aposition: absolute; transform: translatex(-20.0vw);
    -webkit-animation: slideinleft 1s forwards;
    -webkit-animation-delay: 1.6s;
    animation: slideinleft 1s forwards;
    animation-delay: 1.6s;
}

.rightslideinbox { aposition: absolute; transform: translatex(20.0vw);
    -webkit-animation: slideinright 1s forwards;
    -webkit-animation-delay: 1.6s;
    animation: slideinright 1s forwards;
    animation-delay: 1.6s;
}

.bottomslideinbox { aposition: absolute; transform: translatey(20.0vw);
    -webkit-animation: slideinbottom 1s forwards;
    -webkit-animation-delay: 1.6s;
    animation: slideinbottom 1s forwards;
    animation-delay: 1.6s;
}


.animation_delay1 { animation-delay: 0.5s !important; }
.animation_delay2 { animation-delay: 0.8s !important; }
.animation_delay3 { animation-delay: 1.1s !important; }

@keyframes dolower {
    0% {
        atransform: translateY(0px);
		top: 0;
		left: 0px;
        opacity: 0.25;
        filter:blur(1px);
    }
    15% {
	    top: 200px;
        left: 300px;		
    }
    35% {
	    top: 400px;
        left: 400px;		
    }
    100% {
      atransform: translateY(-200px);
	    top: 2000px;
        left: 1000px;		
        opacity: 0.1;
        filter:blur(20px);
    }
}

.lower { animation: dolower 20s linear forwards; position: fixed; left: 100px; top: 0; }

@keyframes logocolorshift { 
	0% {
		color: #daa520;
		text-shadow: 0 0 0 rgba(200, 200, 50, 0.50);
	}
	50% {
		color: #dcdcdc;
		text-shadow: 0 0 5px rgba(200, 100, 100, 1);
  }	
	100% {
		color: #daa520;
		text-shadow: 0 0 0 rgba(200, 200, 50, 0.50);
	}
}

.logocolor { animation: logocolorshift 30s infinite;  }
 

.smoke_holder1 { position: relative; transform: rotate(-10deg); }
.smoke_holder2 { position: relative; transform: rotate(1deg); }
.smoke, .smoke2 { position:absolute; }
.smoke ul, .smoke2 ul { margin:0; padding:0; display:flex; }
.smoke ul li { list-style:none; font-weight:bold; letter-spacing:10px; filter:blur(1px); color:#4703A6;  text-shadow: 0 0 23px rgba(218, 165, 32, 1); font-family: garamond; font-style: italic; font-size:6em; display: inline-block; opacity:0 }
.smoke2 ul li { list-style:none; font-weight:bold; letter-spacing:10px; filter:blur(1px); color:#4703A6;  text-shadow: 0 0 23px rgba(218, 165, 32, 1); font-family: garamond; font-style: italic; font-size:6em; display: inline-block; opacity:1 }
.smoke ul  li { animation: smoke 1s linear forwards; animation-delay: 1s; }
.smoke2 ul  li { animation: smoke2 0.5s linear forwards; animation-delay: 1s; }

@keyframes smoke {
    100% {
        transform: rotate(0deg) translateY(0px);
        opacity: 1;
        filter:blur(1px);
    }
    0% {
      transform: rotate(-90deg) translateY(-200px);
        opacity: 0;
        filter:blur(20px);
    }
}

@keyframes smoke2 {
    0% {
        transform: rotate(0deg) translateY(0px);
        opacity: 1;
        filter:blur(1px);
    }
    99% {
      transform: rotate(90deg) translateY(-1.0vw) translateX(-5.0vw);
        opacity: 0;
        filter:blur(2.0vw);
    }
	100% {
        opacity: 0;
		display: none;
	}
}

.smoke ul li:nth-child(1){ animation-delay:0s }
.smoke ul li:nth-child(2){ animation-delay:.4s }
.smoke ul li:nth-child(3){ animation-delay:.8s }
.smoke ul li:nth-child(4){ animation-delay:1.2s }
.smoke ul li:nth-child(5){ animation-delay:1.6s }
.smoke ul li:nth-child(6){ animation-delay:2.0s }
.smoke ul li:nth-child(7){ animation-delay:2.4s }

.smoke2 ul li:nth-child(1){ animation-delay:8.0s }
.smoke2 ul li:nth-child(2){ animation-delay:8.2s }
.smoke2 ul li:nth-child(3){ animation-delay:8.4s }
.smoke2 ul li:nth-child(4){ animation-delay:8.6s }
.smoke2 ul li:nth-child(5){ animation-delay:8.8s }
.asmoke2 ul li:nth-child(6){ animation-delay:9.0s }
.asmoke2 ul li:nth-child(7){ animation-delay:9.2s }

.glowtexthover:hover {animation: glowtext 4.5s; }

@keyframes glowtext {
    0% {
        text-shadow: 0 0 0;
    }
   100% {
        text-shadow: 0 0 190px rgba(218,165,32,1);
    }
}

.glowboxhover:hover {animation: glowbox 1.5s infinite; }

@keyframes glowbox {
    0% {
        box-shadow: 0 0 0;
    }
   50% {
        box-shadow: 0 0 20px rgba(218,165,32,1);
    }
    0% {
        box-shadow: 0 0 0;
    }
}


.shimmer {
  color: rgba(255,255,255,0.75);
  background: -webkit-gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #fff));
  background: -moz-gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #fff));
  background: gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #fff));
  -webkit-background-size: 7.0vw 100%;
  -moz-background-size: 7.0vw 100%;
  background-size: 7.0vw 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  -webkit-animation-name: shimmer;
  -moz-animation-name: shimmer;
  animation-name: shimmer;
  -webkit-animation-duration: 20s;
  -moz-animation-duration: 20s;
  animation-duration: 15s;
  animation-delay: 5s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  background-repeat: no-repeat;
  background-position: -70px 0;
  background-color: #222;
}

@-moz-keyframes shimmer {
  0% {
    background-position: -7.0vw;
  }
  40% {
    background-position: 57.0vw;
  }
  100% {
    background-position: 57.0vw;
  }
}
@-webkit-keyframes shimmer {
  0% {
    background-position: -7.0vw;
  }
  40% {
    background-position: 57.0vw;
  }
  100% {
    background-position: 57.0vw;
  }
}
@-o-keyframes shimmer {
  0% {
    background-position: -7.0vw;
  }
  40% {
    background-position: 57.0vw;
  }
  100% {
    background-position: 57.0vw;
  }
}
@keyframes shimmer {
  0% {
    background-position: -7.0vw;
  }
  40% {
    background-position: 57.0vw;
  }
  100% {
    background-position: 57.0vw;
  }
}
	


@keyframes float {
	0% {
		box-shadow: 0 0.5vw 1.5vw 0vw rgba(0,0,0,0.6);
		transform: translatey(0px);
	}
	40% {
		box-shadow: 0 2.5vw 1.5vw 0vw rgba(0,0,0,0.2);
		transform: translatey(-1.0vw);
	}
	100% {
		box-shadow: 0 0.5vw 1.5vw 0vw rgba(0,0,0,0.6);
		transform: translatey(0px);
	}
}

.floater1 { box-shadow: 0 0.5vw 1.5vw 0vw rgba(0,0,0,0.6);	transform: translatey(0px); 	animation: float 10s ease-in-out infinite;     -webkit-animation-delay: 1.6s;     -moz-animation-delay: 1.6s;     animation-delay: 1.6s; }
.floater2 { box-shadow: 0 0.5vw 1.5vw 0vw rgba(0,0,0,0.6);	transform: translatey(0px); 	animation: float 8s ease-in-out infinite;     -webkit-animation-delay: 3.6s;     -moz-animation-delay: 3.6s;     animation-delay: 3.6s; }
.floater3 { box-shadow: 0 0.5vw 1.5vw 0vw rgba(0,0,0,0.6);	transform: translatey(0px); 	animation: float 12s ease-in-out infinite;     -webkit-animation-delay: 2.6s;     -moz-animation-delay: 2.6s;     animation-delay: 2.6s; }

html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}


@-webkit-keyframes animateTop {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}

@keyframes animateTop {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}

@-webkit-keyframes animateRight {
  0% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  100% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}

@keyframes animateRight {
  0% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  100% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}

@-webkit-keyframes animateBottom {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}

@keyframes animateBottom {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}

@-webkit-keyframes animateLeft {
  0% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}

@keyframes animateLeft {
  0% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}



.animated-button, .animated-button_green, .animated-button_blue, .animated-button_purple {
  background: linear-gradient(-30deg, #0b1b3d 50%, #08142b 50%);
  padding: 2.0vw 4.0vw;
  margin: 1.2vw;
  display: inline-block;
  -webkit-transform: translate(0%, 0%);
          transform: translate(0%, 0%);
  overflow: hidden;
  color: #d4e0f7;
  font-size: 2.0rem;
  letter-spacing: 2.5px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-box-shadow: 0 2.0vw 5.0vw rgba(0, 0, 0, 0.5);
          box-shadow: 0 2.0vw 5.0vw rgba(0, 0, 0, 0.5);
}

.animated-button.fw, .animated-button_green.fw, .animated-button_blue.fw, .animated-button_purple.fw {
  padding: 2.0vw 0;
  width: 100%; 
}

.animated-button::before, .animated-button_green::before, .animated-button_blue::before, .animated-button_purple::before {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #8592ad;
  opacity: 0;
  -webkit-transition: .2s opacity ease-in-out;
  transition: .2s opacity ease-in-out;
}

.animated-button:hover::before, .animated-button_green:hover::before, .animated-button_blue:hover::before, .animated-button_purple:hover::before {
  opacity: 0.2;
}

.animated-button span, .animated-button_green span, .animated-button_blue span, .animated-button_purple span {
  position: absolute;
}

.animated-button span:nth-child(1), 
.animated-button_green span:nth-child(1),
.animated-button_blue span:nth-child(1),
.animated-button_purple span:nth-child(1) {
  top: 0px;
  left: 0px;
  width: 100%;
  height: 2px;
  background: -webkit-gradient(linear, right top, left top, from(rgba(8, 20, 43, 0)), to(#2662d9));
  background: linear-gradient(to left, rgba(8, 20, 43, 0), #2662d9);
  -webkit-animation: 2s animateTop linear infinite;
          animation: 2s animateTop linear infinite;
}

.animated-button span:nth-child(2),
.animated-button_green span:nth-child(2),
.animated-button_blue span:nth-child(2),
.animated-button_purple span:nth-child(2) {
  top: 0px;
  right: 0px;
  height: 100%;
  width: 2px;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(8, 20, 43, 0)), to(#2662d9));
  background: linear-gradient(to top, rgba(8, 20, 43, 0), #2662d9);
  -webkit-animation: 2s animateRight linear -1s infinite;
          animation: 2s animateRight linear -1s infinite;
}


.animated-button span:nth-child(3), 
.animated-button_green span:nth-child(3),
.animated-button_blue span:nth-child(3),
.animated-button_purple span:nth-child(3) {
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 2px;
  background: -webkit-gradient(linear, left top, right top, from(rgba(8, 20, 43, 0)), to(#2662d9));
  background: linear-gradient(to right, rgba(8, 20, 43, 0), #2662d9);
  -webkit-animation: 2s animateBottom linear infinite;
          animation: 2s animateBottom linear infinite;
}


.animated-button span:nth-child(4), 
.animated-button_green span:nth-child(4),
.animated-button_blue span:nth-child(4) {
  top: 0px;
  left: 0px;
  height: 100%;
  width: 2px;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(8, 20, 43, 0)), to(#2662d9));
  background: linear-gradient(to bottom, rgba(8, 20, 43, 0), #2662d9);
  -webkit-animation: 2s animateLeft linear -1s infinite;
          animation: 2s animateLeft linear -1s infinite;
}


.animated-button_green {
  background: linear-gradient(-30deg, #0b3d0b 50%, #082b08 50%);
  color: #d4f7d4;
  -webkit-box-shadow: 0 2.0vw 5.0vw rgba(0, 0, 0, 0.5);
          box-shadow: 0 2.0vw 5.0vw rgba(0, 0, 0, 0.5);
}

.animated-button_green::before {
  background-color: #85ad85;
}

.animated-button_green span:nth-child(1) {
  background: -webkit-gradient(linear, right top, left top, from(rgba(8, 43, 8, 0)), to(#26d926));
  background: linear-gradient(to left, rgba(8, 43, 8, 0), #26d926);
  -webkit-animation: 2s animateTop linear infinite;
          animation: 2s animateTop linear infinite;
}

.animated-button_green span:nth-child(2) {
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(8, 43, 8, 0)), to(#26d926));
  background: linear-gradient(to top, rgba(8, 43, 8, 0), #26d926);
  -webkit-animation: 2s animateRight linear -1s infinite;
          animation: 2s animateRight linear -1s infinite;
}


.animated-button_green span:nth-child(3) {
  background: -webkit-gradient(linear, left top, right top, from(rgba(8, 43, 8, 0)), to(#26d926));
  background: linear-gradient(to right, rgba(8, 43, 8, 0), #26d926);
  -webkit-animation: 2s animateBottom linear infinite;
          animation: 2s animateBottom linear infinite;
}

.animated-button_green span:nth-child(4) {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(8, 43, 8, 0)), to(#26d926));
  background: linear-gradient(to bottom, rgba(8, 43, 8, 0), #26d926);
  -webkit-animation: 2s animateLeft linear -1s infinite;
          animation: 2s animateLeft linear -1s infinite;
}


.animated-button_blue {
  background: linear-gradient(-30deg, #0b243d 50%, #081a2b 50%);
  color: #d4e6f7;
  -webkit-box-shadow: 0 2.0vw 5.0vw rgba(0, 0, 0, 0.5);
          box-shadow: 0 2.0vw 5.0vw rgba(0, 0, 0, 0.5);
}

.animated-button_blue::before {
  background-color: #8599ad;
}

.animated-button_blue span:nth-child(1) {
  background: -webkit-gradient(linear, right top, left top, from(rgba(8, 26, 43, 0)), to(#2680d9));
  background: linear-gradient(to left, rgba(8, 26, 43, 0), #2680d9);
  -webkit-animation: 2s animateTop linear infinite;
          animation: 2s animateTop linear infinite;
}

.animated-button_blue span:nth-child(2) {
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(8, 26, 43, 0)), to(#2680d9));
  background: linear-gradient(to top, rgba(8, 26, 43, 0), #2680d9);
  -webkit-animation: 2s animateRight linear -1s infinite;
          animation: 2s animateRight linear -1s infinite;
}

.animated-button_blue span:nth-child(3) {
  background: -webkit-gradient(linear, left top, right top, from(rgba(8, 26, 43, 0)), to(#2680d9));
  background: linear-gradient(to right, rgba(8, 26, 43, 0), #2680d9);
  -webkit-animation: 2s animateBottom linear infinite;
          animation: 2s animateBottom linear infinite;
}

.animated-button_blue span:nth-child(4) {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(8, 26, 43, 0)), to(#2680d9));
  background: linear-gradient(to bottom, rgba(8, 26, 43, 0), #2680d9);
  -webkit-animation: 2s animateLeft linear -1s infinite;
          animation: 2s animateLeft linear -1s infinite;
}



.animated-button_purple {
  background: linear-gradient(-30deg, #3d0b3d 50%, #2b082b 50%);
  color: #f7d4f7;
  -webkit-box-shadow: 0 2.0vw 5.0vw rgba(0, 0, 0, 0.5);
          box-shadow: 0 2.0vw 5.0vw rgba(0, 0, 0, 0.5);
}

.animated-button_purple::before {
  background-color: #ad85ad;
}

.animated-button_purple span:nth-child(1) {
  background: -webkit-gradient(linear, right top, left top, from(rgba(43, 8, 43, 0)), to(#d926d9));
  background: linear-gradient(to left, rgba(43, 8, 43, 0), #d926d9);
  -webkit-animation: 2s animateTop linear infinite;
          animation: 2s animateTop linear infinite;
}

.animated-button_purple span:nth-child(2) {
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(43, 8, 43, 0)), to(#d926d9));
  background: linear-gradient(to top, rgba(43, 8, 43, 0), #d926d9);
  -webkit-animation: 2s animateRight linear -1s infinite;
          animation: 2s animateRight linear -1s infinite;
}

.animated-button_purple span:nth-child(3) {
  background: -webkit-gradient(linear, left top, right top, from(rgba(43, 8, 43, 0)), to(#d926d9));
  background: linear-gradient(to right, rgba(43, 8, 43, 0), #d926d9);
  -webkit-animation: 2s animateBottom linear infinite;
          animation: 2s animateBottom linear infinite;
}

.animated-button_purple span:nth-child(4) {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(43, 8, 43, 0)), to(#d926d9));
  background: linear-gradient(to bottom, rgba(43, 8, 43, 0), #d926d9);
  -webkit-animation: 2s animateLeft linear -1s infinite;
          animation: 2s animateLeft linear -1s infinite;
}



/* Not used. Potential for long shadow */
/* <div style="font-size: 17px; color: #222; font-weight: bold; font-family: 'Fantasy'"><div class="sh1 " data-title="Books">Books</div></div> */

.sh1 {
            font-size: 6em;
            color: rgba(0, 0, 0, .2);
            position: absolute;
            margin: 0;
            padding: 0;
            transform-origin: bottom;
            transform: skewX(-10deg);
  
  }
  
.sh1::before {
            content: attr(data-title);
            position: absolute;
            color: #f22; 
            transform-origin: bottom;
            transform: skewX(10deg)
        }	


/* Alterations based on screen size */
@media screen and (min-width: 1060px) {
.headerlogo img { margin: 10px;  }
.headerlogo { margin: 7px 0; padding: 10px; } 
.bigheader { border-width: 0 0 5px 0;  }
.bigfooter {  margin-top: 20px;  border-width: 5px 0 0 0;  }

.booklisting_cover { height: 560px !important;  }

.titlemenu_holder { padding-left: 50px;  }
.titlemenu_item { margin: auto 10px; }
.button_medium, .button_mediumi { padding: 10px 30px; }
.booklisting_title_holder { margin-bottom: 15px;  }
.booklisting_title { margin-left: 400px; padding: 8px 10px; }
.booklisting_cover { margin: 0 15px 15px 0;  }

.publist_holder_sub { margin-right: 20px; }
.publist_holder_header { margin-bottom: 10px;  }
.publist_item { margin-bottom: 20px; }

.quote { line-height: 30px;  }
.attribution {line-height: 15px;margin-top: 10px; }	
.bubble { border-radius: 40px; padding: 24px; text-align: center; color: #eee; }
.bubble-bottom-right.green1:before,
.bubble-bottom-right.green2:before,
.bubble-bottom-right.red1:before,
.bubble-bottom-right.purple1:before,
.bubble-bottom-right.orange1:before
 {   border-right-width: 24px;   border-top-width: 12px; border-left-width: 12px;  border-bottom-width: 20px; right: 32px; bottom: -29px; }

.bubble-bottom-left.green1:before,
.bubble-bottom-left.green2:before,
.bubble-bottom-left.red1:before,
.bubble-bottom-left.purple1:before,
.bubble-bottom-left.orange1:before
 {   border-left-width: 24px;   border-top-width: 12px; border-right-width: 12px;  border-bottom-width: 20px; right: 32px; bottom: -29px; }

.animated-button, .animated-button_green, .animated-button_blue, .animated-button_purple {
  padding: 20px 40px;
  margin: 12px;
}

.animated-button.fw, .animated-button_green.fw, .animated-button_blue.fw, .animated-button_purple.fw {
  padding: 20px 0;
}

.bookreviews_bigholder_col { margin: 0 10px; }
.bookreviews_smallholder td { padding-bottom: 50px; }

.contactform_text { padding-top: 70px;  margin-bottom: 20px;  }
.contactform_button_holder { padding: 9px; }
.contactform_button { padding: 10px 20px; }
.contactform_row { border-spacing: 9px;}
.contactform_box3 { margin: 9px 9px;   }
.contactform_holder input[type = "text"] { padding: 8px 16px; border-radius: 5px; width: 100%;  box-sizing: border-box;}
.contactform_holder textarea  { font-size: 1.7rem; font-family: 'Times New Roman'; padding: 8px 16px; border-radius: 5px; height: 200px; }




}

@media only screen and (max-width: 950px) {
   html { font-size: 9.1px; }
   .titlemenu_holder { display: none; }
   .scrollsidebar_open_div { display: block; }
}

@media only screen and (max-width: 900px) {
   html { font-size: 8.7px; }
}

@media only screen and (max-width: 850px) {
   html { font-size: 8.3px; }
}

@media only screen and (max-width: 800px) {
   html { font-size: 7.9px; }
}

@media only screen and (max-width: 750px) {
   html { font-size: 7.5px; }
}

@media only screen and (max-width: 700px) {
   html { font-size: 7.1px; }
}

@media only screen and (max-width: 650px) {
   html { font-size: 6.7px; }
}

@media only screen and (max-width: 600px) {
   html { font-size: 6.3px; }
.booklisting_available_holder { width: 90%; }
.booklisting_available_item { display: block; margin: 0 auto 10px auto; width: 60.0vw; }
}

@media only screen and (max-width: 550px) {
   html { font-size: 5.9px; }
}

@media only screen and (max-width: 500px) {
   html { font-size: 5.8px; }
  .fancyblock_textblock { font-size: 2.5rem; {
}

@media only screen and (max-width: 450px) {
   html { font-size: 5.7px; }
  .fancyblock_textblock { font-size: 2.2rem; }
  .sidebar_list { margin-left: 2.0vw;  }
  .contactform_text { font-size: 2.0rem;  }
}

@media only screen and (max-width: 400px) {
   html { font-size: 5.6px; }
}

@media only screen and (max-width: 350px) {
   html { font-size: 5.5px; }
}

@media print {
}