/*
Theme Name: Streib & Kollegen
Theme URI: http://www.praxis-streib.de
Description: This Theme is designed for STREIB & KOLLEGEN Zahnärzte, Hangstraße 2, 74182 Obersulm-Affaltrach. It is not allowed to use this theme on other sites without permission. It is not allowed to change the code and use it elsewhere.
Author: Heimatbüro Fotografie & Gestaltung, Handwerkerhof 11, 74076 Heilbronn
Author URI: https://www.heimatbuero.de
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 8.0
Version: 2.0
Text Domain: heimat
*/

/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* LOADING FONTS */
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* Heimat Webfont */
@font-face {
     font-display: swap;
     font-family: 'heimat';
     font-weight: normal;
     font-style: normal;
     src: url('assets/fonts/heimat.woff2') format('woff2');
}

@font-face {
    font-family: 'bariol_bold';
    src: url('assets/fonts/bariol_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'bariol_light';
    src: url('assets/fonts/bariol_light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'bariol_regular';
    src: url('assets/fonts/bariol_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

:root {
     --common-font: "bariol_regular", Helvetica, Arial, sans-serif;
}

/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* GLOBAL */
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

html,
body                                    { margin: 0; padding: 0; width: 100%; height: 100%; min-height: 100%; font-size: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: var(--body-bg-color); }

body                                    { height: 100%; display: flex; flex-direction: column; -webkit-overflow-scrolling: touch; font-family: var(--common-font); font-size: var(--para); color: var(--txt-col); font-style: normal; letter-spacing: var(--letter-spacing); font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

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

.hb-ico                                 { font-family: "heimat"; font-style: normal; }

article, aside, details, figcaption, figure, header, main, nav, section	{ display: block; }

.aligncenter,
div.aligncenter                         { display: block; margin: 5px auto 5px auto; }

img.alignleft                           { margin: 0 20px 20px 0; float: left; }
img.alignright                          { margin: 0 0 20px 20px; float: right; }

.left,
.alignleft                              { float: left; }

.right,
.alignright                             { float: right; }

.wow                                    { visibility: hidden; }

img                                     { margin: 0; }

ul,
ol                                      { margin: 0 0 3rem 0rem; list-style-position: inside; }

ul                                      { padding-left: 20px; }
li                                      { line-height: 28px; }
ol                                      { padding-left: 36px; }

ul                                      { list-style: disc; }
ul ul                                   { list-style: circle; }
ul ul ul                                { list-style: square; }
ol                                      { list-style: decimal; }
ol ol                                   { list-style: lower-alpha; }
ol ol ol                                { list-style: lower-roman; }

dt,
dd                                      { line-height: 1.5; }
dt                                      { font-weight: 700; }
dt + dd                                 { margin-top: 0.5rem; }
dd + dt                                 { margin-top: 1.5rem; }

.sr-only                                { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* TYPOGRAPHY */
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

h1                                      { font-size: var(--h1); color: var(--h1-col); }
h2                                      { font-size: var(--h2); color: var(--h2-col); }
h3                                      { font-size: var(--h3); color: var(--h3-col); }
h4                                      { font-size: var(--h4); color: var(--h4-col); }
h5                                      { font-size: var(--h5); color: var(--h5-col); }
h6                                      { font-size: var(--h6); color: var(--h6-col); }

h1, h2, h3, h4, h5, h6                  { font-family: "bariol_regular", Helvetica, Arial, sans-serif; margin-bottom: 0.62rem; /* line-height: 110%; */ }

h1                                      { line-height: calc(1ex / 0.42); }
h2                                      { line-height: calc(1ex / 0.42); }
h3                                      { line-height: calc(1ex / 0.38); }
h4                                      { line-height: calc(1ex / 0.37); }

/* h3                                      { line-height: calc(var(--h3) + 12px);} */

/* p                                       { margin-bottom: 20px; line-height: 28px; -webkit-hyphens: auto; -ms-hyphens: auto; -moz-hyphens: auto; hyphens: auto; } */
p                                       { margin-bottom: 20px; line-height: calc(1ex / 0.32); }
p:empty                                 { height: 0; margin: 0; padding: 0; }

a,
a:link                                  { pointer-events: all; text-decoration: none; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }

a                                       { color: var(--a-col); }
a:hover                                 { color: var(--a-hover-col); text-decoration: underline; text-underline-offset: 5px; }
/*a:active                              { color: var(--aactive-color); }
a:visited,
a:visited strong                        { color: var(--avisited-color); background-color: var(--text-decoration-color); } */

a[href$=".PDF"]::before, 
a[href$=".pdf"]::before 		          { content: "\f02e"; font-family: "heimat"; padding: 0 14px 0 0; color: var(--txt-col); }

a img                                   { border: none; }

.more_link                              { color: var(--a-col); }
.more_link:hover                        { color: var(--a-hover-col); }

::selection                             { background: var(--a-col); color: var(--body-bg-color); }
::-moz-selection                        { background: var(--a-col); color: var(--body-bg-color); }

.pp-title							  { color: var(--pp-title-col); }
.archive-title					{ color: var(--archive-title-color); }
.meta-text						  { color: var(--meta-txt-color); }
.meta-text a						{ color: var(--meta-link-color); }
.meta-text a:hover			{ color: var(--meta-link-hover-color); }

strong                                  { font-weight: 700; }
em                                      { font-style: italic; }

blockquote                              { margin: 0 0 30px 0; padding: 0 30px 0 30px; font-style: italic; font-size: 1.2rem; font-family: "Helvetica Neue", sans-serif, Helvetica, Arial; border-left: 5px solid #9bab9a; }

code                                    { font-family: "Courier New", Courier, serif; overflow: auto; padding: 2px; background: #fff; }
pre code                                { background: none; }
pre                                     { margin: 0 auto 20px auto; padding: 10px; max-width: 80%; background: #f7f7f7; overflow: auto; border: 1px solid #e4e4e4; font-family: "Helvetica Neue", sans-serif, Helvetica, Arial; }
.dropcap                                { float: left; font-size: 5rem; padding-right: 7px; line-height: 4.5rem; }

small, sub, sup                         { font-size: .83em; }
sub                                     { vertical-align: sub; }
sup                                     { vertical-align: super; }

.is_align_left                          { justify-content: flex-start; }
.is_align_center                        { justify-content: center; }
.is_align_right                         { justify-content: flex-end; }

.block_is_left                          { flex-direction: row; }
.block_is_right                         { flex-direction: row-reverse; }

.is_align_left h3                       { left: 0; }
.is_align_center h3                     { left: 0; }
.is_align_right h3                      { right: 16px; }

.font-thin 						  { font-weight: 100; }
.font-extralight 				{ font-weight: 200; }
.font-light 						{ font-weight: 300; }
.font-normal 						{ font-weight: 400; }
.font-medium 						{ font-weight: 500; }
.font-semibold 					{ font-weight: 600; }
.font-bold 						  { font-weight: 700; }
.font-extrabold 				{ font-weight: 800; }
.font-black 						{ font-weight: 900; }

.has-small-font-size                    { font-size: 0.75rem; line-height: 1rem; }
.has-medium-font-size                   { font-size: 0.88rem; line-height: 1.12rem; }
.has-large-font-size                    { font-size: 1.25rem; line-height: 1.50rem; }
.has-x-large-font-size                  { font-size: 1.38rem; line-height: 1.62rem; }

/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* GENEREL LAYOUT */
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* BASICS ---------------------------------------------------------------------------------------------------------------------*/

.is--hidden    { 
  display: none!important; 
}

/* HEADER ---------------------------------------------------------------------------------------------------------------------*/

header    { 
  width: 100%; 
  height: 120px; 
  top: 0; 
  position: fixed; 
  z-index: 1000; 
}

body.logged-in.admin-bar header    { 
  top: 32px; 
}

.page-header.has--bg { 
  background-color: var(--header-bg-col); 
  -webkit-box-shadow: 0px 10px 20px 0px rgba(255,255,255,0.95); 
  -moz-box-shadow: 0px 7px 5px 0px rgba(255,255,255,0.95); 
  box-shadow: 0px 7px 5px 0px rgba(255,255,255,0.95); 
  -webkit-transition: background-color .5s ease; 
  -moz-transition: background-color .5s ease; 
  -ms-transition: background-color .5s ease; 
  -o-transition: background-color .5s ease; 
  transition: background-color .5s ease; 
}

header .page-header__bar { 
  width: 100%; 
  position: absolute; 
  top: 0; 
  left: 0; 
  display: flex; 
}

header .page-header__bar .page-header__logo { 
  width: 280px; 
  height: auto; 
  margin: 39px 0 0 110px; 
}

.terminvereinbarung ul {
  list-style: none;
  padding-left: 0;
}

.terminvereinbarung ul a {
  font-family: 'bariol_bold', sans-serif;
  margin: 10px 0 0 0;
}

.terminvereinbarung.is-hidden { 
  visibility: hidden; 
}

.terminvereinbarung.is-visible { 
  visibility: visible; 
}

header .page-header__bar .page-header__logo a svg #mid { 
  fill: var(--logo-color-1); 
}

.error404 header .page-header__bar .page-header__logo a svg #mid,
header .page-header__bar .page-header__logo.add-color a svg #mid { 
  fill: var(--logo-color-2); 
}

/* BUBBLE MENU */

nav.page-hero__navigation ul { 
  list-style: none; 
  margin: 0; 
  padding: 0; 
  position: relative; 
  width: 100%; 
  height: 100%; 
}

nav.page-hero__navigation ul .bubble-menu--item-1	{ 
  float: right; 
  position: absolute; 
  right: 527px; 
  top: 467px; 
  z-index: 100; 
}

nav.page-hero__navigation ul .bubble-menu--item-2	{ 
  float: right; 
  position: absolute;	
  right: 190px; 
  top: 517px; 
  z-index: 110; 
}

nav.page-hero__navigation ul .bubble-menu--item-3	{ 
  float: right; 
  position: absolute; 
  right: 340px; 
  top: 330px; 
  z-index: 120; 
}

nav.page-hero__navigation ul .bubble-menu--item-4	{ 
  float: right; 
  position: absolute; 
  right: 100px; 
  top: 237px; 
  z-index: 130; 
}

nav.page-hero__navigation ul .bubble-menu--item-5	{ 
  float: right; 
  position: absolute; 
  right: 480px; 
  top: 52px; 
  z-index: 140; 
}

nav.page-hero__navigation ul .bubble-menu--item-1 { 
  -webkit-animation-delay: 0.08s; 
  -moz-animation-delay: 0.06s; 
  -o-animation-delay: 0.06s; 
  animation-delay: 0.08s; 
}

nav.page-hero__navigation ul .bubble-menu--item-2 { 
  -webkit-animation-delay: 0.03s; 
  -moz-animation-delay: 0.03s; 
  -o-animation-delay: 0.03s; 
  animation-delay: 0.03s; 
}

nav.page-hero__navigation ul .bubble-menu--item-3 { 
  -webkit-animation-delay: 0.05s; 
  -moz-animation-delay: 0.05s; 
  -o-animation-delay: 0.05s; 
  animation-delay: 0.05s; 
}

nav.page-hero__navigation ul .bubble-menu--item-4 { 
  -webkit-animation-delay: 0.02s; 
  -moz-animation-delay: 0.02s; 
  -o-animation-delay: 0.02s; 
  animation-delay: 0.02s; 
}

nav.page-hero__navigation ul span.bubble-menu--item-title {
  font-family: 'bariol_bold', sans-serif; 
  letter-spacing: var(--letter-spacing); 
  color: var(--menu-text-col);
  font-size: 18px; 
  height: 150px; 
  width: 150px; 
  position: absolute; 
  background-color: var(--menu-bg-col); 
  border-radius: 50%; 
  opacity: 0; 
  top: 0px; 
  left: 0px; 
  display: flex; 
  justify-content: center; 
  align-items: center;
  -webkit-transition: 0.2s; 
  -moz-transition: 0.2s; 
  -o-transition: 0.2s; 
  -ms-transition: 0.2s; 
  transition: 0.2s; 
  z-index: 101; 
}

nav.page-hero__navigation ul span.bubble-menu--item-title:hover { 
  opacity: 1; 
}

/* MENU ----------------------------------------------------------------------------------------------------------------------*/

.mobile-menu-wrapper,
.mobile--menu { 
  display: none; 
}

#mainmenu { 
  font-family: 'bariol_bold',Helvetica,Arial,sans-serif;
  height: 86px; 
  display: flex; 
  flex-grow: 1; 
  justify-content: flex-end;
}

#mainmenu ul { 
  margin: 35px 110px 0 0; 
  list-style: none; 
  text-transform: uppercase; 
}

#mainmenu ul li { 
  height: 46px;  
  float: left; 
}

#mainmenu ul ul { 
  text-align: right; 
}

#mainmenu ul li a  { 
  padding: 1px 2px; 
  margin-right: 20px; 
  font-size: 1rem; 
  position: relative; 
  display: inline-block; 
  padding: 0.5em 0; 
  text-decoration: none; 
  letter-spacing: var(--letter-spacing); 
  color: var(--menu-text-col);  
  -webkit-transition: color .4s ease; 
  -moz-transition: color .4s ease; 
  -ms-transition: color .4s ease; 
  -o-transition: color .4s ease; 
  transition: color .4s ease; 
  -webkit-transition: background-color .4s ease; 
  -moz-transition: background-color .4s ease; 
  -ms-transition: background-color .4s ease; 
  -o-transition: background-color .4s ease; 
  transition: background-color .4s ease; 
}

#mainmenu li.current-menu-item a,
#mainmenu li.current_page_item a { 
  color: var(--menu-text-col); 
}

#mainmenu ul li a:hover::after { 
  content: ""; 
  position: absolute; 
  left: 0; 
  bottom: 0; 
  width: 100%; 
  height: 12px; 
  border-radius: 20px; 
  z-index: -1; 
}

#mainmenu ul li a.is-active::after,
#mainmenu ul li a.is-active::after { 
  content: ""; 
  position: absolute; 
  left: 0; 
  bottom: 0; 
  width: 100%; 
  height: 12px; 
  border-radius: 20px; 
  z-index: -1; 
}

#mainmenu ul ul { 
  position: absolute; 
  list-style: none; 
  right: -9999px; 
  font-size: 16px; 
  float: right; 
  height: 46px; 
  line-height: 46px; 
  z-index: 478; 
}

#mainmenu ul ul a { 
  padding: 1px 2px; 
  margin-right: 12px; 
}

#mainmenu ul ul li { 
  float: left; 
}

#mainmenu ul ul li.menu-item-10::after { 
  content: '\21B2'; 
  margin-right: 0px!important;
}

#mainmenu li:hover ul { 
  position: absolute; 
  right: 42px; 
  top: 46px;  
}

/* CONTENT --------------------------------------------------------------------------------------------------------------------*/

/* ---------------- PAGE HERO ---------------- */

.page-hero  { 
  width: 100%; 
  min-height: 970px; 
  display: flex;
  background-color: var(--theme-color);  
  z-index: 100; 
}

.page-hero .page-hero__container--40 { 
  width: 40%;
  padding: 0 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.page-hero .page-hero__container--60 { 
  width: 60%; 
}

.page-hero .page-hero__contactbox { 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  width: 400px; 
  height: 400px; 
  border-radius: 50%; 
  background-color: #fff; 
  z-index: 150;
}

.page-hero .page-hero__contactbox p {
  margin-bottom: 0;
}

.page-hero .page-hero__infobox { 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  width: 350px; 
  height: 350px; 
  border-radius: 50%; 
  background-color: #fff; 
  padding: 20px 40px;
  margin: -80px -400px 0 0;
  z-index: 140;
}

.page-hero__infobox p {
  font-size: clamp(0.875rem, 0.85rem + 0.2vw, 1rem);
  margin-bottom: 0;
  hyphens: auto;
}

/* ---------------- SECTIONS ----------------- */

.content__container {
  display: flex;
  position: relative;
}

/* Content links, Bubbles rechts */
.section--right .content__container {
  flex-direction: row;
  margin: 200px 0;
}

/* Content rechts, Bubbles links */
.section--left .content__container {
  flex-direction: row-reverse;
}

.section--right .content__container .content__container--content {
  padding: 200px 0 200px 110px;
}

.section--right .content__container .content__container--bubbles {
  left: 40%;
}

.section--left .content__container .content__container--content {
  padding: 200px 130px 200px 0; 
}

.section--left .content__container .content__container--bubbles {
  right: 40%;
}

.content__container.has-bubbles .content__container--content {
  width: 40%;
  position: relative;
}

.content__container.has-no-bubbles .content__container--content {
  width: 100%;
  padding: 0 130px 0 110px;
  position: relative;
}

.content__container--bubbles {
  height: 100%;
  width: 60%; /* entspricht width: 60% */
  position: absolute;
  overflow: hidden;
  pointer-events: none;
}

.bubble-layer { 
  position:absolute; 
  inset: 0; 
  width:100%; 
  height:100%; 
}

.bubble{
  position:absolute;
  width:var(--size);
  height:var(--size);
  background:var(--bubble-color, #fff);
  transform: translate(var(--tx, 0), var(--ty, 0));
  border-radius:50%;
  will-change: transform;
}

.image-bubble--item img { 
  width: 150px; 
  height: 150px; 
}

.section--right .image-bubble--item-1	{
  position: absolute; 
  right: 330px; 
  bottom: 419px; 
  overflow:hidden; 
  display: inline-block; 
  -webkit-border-radius: 50%!important; 
  -moz-border-radius: 50%!important; 
  border-radius: 50%!important; 
  z-index: 200; 
}

.section--right .image-bubble--item-2	{ 
  position: absolute; 
  right: 113px; 
  bottom: 186px; 
  overflow:hidden; 
  display: inline-block; 
  -webkit-border-radius: 50%!important; 
  -moz-border-radius: 50%!important; 
  border-radius: 50%!important; 
  z-index: 205; 
}

.section--right .image-bubble--item-3	{ 
  position: absolute; 
  right: 397px; 
  bottom: 30px; 
  overflow:hidden; 
  display: inline-block; 
  -webkit-border-radius: 50%!important; 
  -moz-border-radius: 50%!important; 
  border-radius: 50%!important; 
  z-index: 210; 
}

.section--left .image-bubble--item-1 { 
  position: absolute; 
  left: 330px; 
  bottom: 419px; 
  overflow:hidden; 
  display: inline-block; 
  -webkit-border-radius: 50%!important; 
  -moz-border-radius: 50%!important; 
  border-radius: 50%!important; 
  z-index: 200; 
}

.section--left .image-bubble--item-2 { 
  position: absolute; 
  left: 113px; 
  bottom: 186px; 
  overflow:hidden; 
  display: inline-block; 
  -webkit-border-radius: 50%!important; 
  -moz-border-radius: 50%!important; 
  border-radius: 50%!important; 
  z-index: 205; 
}

.section--left .image-bubble--item-3 { 
  position: absolute; 
  left: 397px; 
  bottom: 30px; 
  overflow:hidden; 
  display: inline-block; 
  -webkit-border-radius: 50%!important; 
  -moz-border-radius: 50%!important; 
  border-radius: 50%!important; 
  z-index: 210; 
}


/* WP Blocks ---------------------------------------------------------------------------------------------------------------- */

.wp-block-social-links.is-layout-flex { 
  display: flex; 
}

.wp-block-social-links li { 
  margin: 0 10px!important; 
}

.wp-block-social-links li:last-child { 
  margin-right: 0; 
}

/*  */

.block-box-shadow { 
  -webkit-box-shadow: 5px 5px 14px 0px rgba(0,0,0,0.2); 
  box-shadow: 5px 5px 14px 0px rgba(0,0,0,0.2); 
}

/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* Footer /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

footer { 
  width: 100%; 
  margin-top: auto; 
  padding: 80px 0 0 0; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  background-color: var(--footer-bg-col); 
}

footer .page-footer__container { 
  width: 100%; 
  max-width: 1280px; 
  color: var(--footer-txt-col); 
}

footer .page-footer__container a {
  color: var(--footer-link-col); 
}

footer .page-footer__container a:hover { 
  color: var(--footer-link-hover-col); 
  text-decoration: none; 
}

/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* MODAL */
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.md-modal { 
  position: fixed; 
  top: 50%; 
  left: 50%; 
  width: 50%; 
  max-width: 630px; 
  min-width: 320px; 
  height: auto; 
  visibility: hidden; 
  -webkit-backface-visibility: hidden; 
  -moz-backface-visibility: hidden; 
  backface-visibility: hidden; 
  -webkit-transform: translateX(-50%) translateY(-50%); 
  -moz-transform: translateX(-50%) translateY(-50%); 
  -ms-transform: translateX(-50%) translateY(-50%); 
  transform: translateX(-50%) translateY(-50%);
  z-index: 100000; 
}

.md-show { 
  visibility: visible; 
}

.md-overlay { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  position: fixed; 
  width: 100%; 
  height: 100%; 
  visibility: hidden; 
  top: 0; 
  left: 0; 
  z-index: 99000; 
  opacity: 0; 
  background: var(--modal-bg-color); 
  -webkit-transition: all 0.3s; 
  -moz-transition: all 0.3s; 
  transition: all 0.3s; 
}

.md-show ~ .md-overlay { 
  opacity: 1; 
  visibility: visible; 
}

.md-close { 
  position: absolute; 
  top: 10px; 
  right: 10px; 
  width: 40px; 
  height: 40px; 
  border: 2px solid #fff; 
  border-radius: 50%; 
  background: transparent; 
  color: #fff; 
  cursor: pointer; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  padding: 0; 
  z-index: 2000;
}

.md-modal.square_box .md-close { 
  border: 2px solid #000;
  color: #000;
}

.md-close svg   { 
  width: 20px; 
  height: 20px; 
}

.md-close:hover { 
  background-color: #f0f0f0; 
  order: #000; 
  color: #000; 
}

.md-close:focus { 
  outline: 2px solid #005fcc; 
  outline-offset: 2px; 
}


/* PopUp ------------------------------------------------------------------------------------------------------------------- */

.md-modal .md-content { 
  color: #000; 
  text-align: center; 
  background: rgb(255,255,255)!important; 
  position: relative; 
  margin: 0 auto; 
  overflow-y: scroll; 
  -webkit-overflow-scrolling: touch; 
}

.md-modal.rounded_box .md-content	{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 450px;
  width: 450px;
  -webkit-border-radius: 50%!important;	
  -moz-border-radius: 50%!important; 
  border-radius: 50%!important; 
}

.md-modal.square_box .md-content { 
  -webkit-border-radius: 20px!important;	
  -moz-border-radius: 20px!important; 
  border-radius: 20px!important; 
}

.md-modal.rounded_box::-webkit-scrollbar .md-content 	{
  display: none; 
}

/*--------------------------------------------------------------
# Modal Effects
--------------------------------------------------------------*/

/* Effect 1: Fade in and scale up */
.md-effect-1 .md-content { -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; }
.md-show.md-effect-1 .md-content { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; }

/* Effect 2: Slide from the right */
.md-effect-2 .md-content { -webkit-transform: translateX(20%); -moz-transform: translateX(20%); -ms-transform: translateX(20%); transform: translateX(20%); opacity: 0; -webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9); -moz-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9); transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9); }
.md-show.md-effect-2 .md-content { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); opacity: 1; }

/* Effect 3: Slide from the bottom */
.md-effect-3 .md-content { -webkit-transform: translateY(20%); -moz-transform: translateY(20%); -ms-transform: translateY(20%); transform: translateY(20%); opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; }
.md-show.md-effect-3 .md-content { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1; }

/* Effect 11: Super scaled */
.md-effect-4 .md-content { -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); transform: scale(2); opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; }
.md-show.md-effect-4 .md-content { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; }

/* Effect 8: 3D flip horizontal */
.md-effect-5.md-modal { -webkit-perspective: 1300px; -moz-perspective: 1300px; perspective: 1300px; }
.md-effect-5 .md-content { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateY(-70deg); -moz-transform: rotateY(-70deg); -ms-transform: rotateY(-70deg); transform: rotateY(-70deg); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; opacity: 0; }
.md-show.md-effect-5 .md-content { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); opacity: 1; }

/* Effect 9: 3D flip vertical */
.md-effect-6.md-modal { -webkit-perspective: 1300px; -moz-perspective: 1300px; perspective: 1300px; }
.md-effect-6 .md-content { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateX(-70deg); -moz-transform: rotateX(-70deg); -ms-transform: rotateX(-70deg); transform: rotateX(-70deg); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; opacity: 0; }
.md-show.md-effect-6 .md-content { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; }

/* Effect 14:  3D Rotate from bottom */
.md-effect-7.md-modal { -webkit-perspective: 1300px; -moz-perspective: 1300px; perspective: 1300px; }
.md-effect-7 .md-content { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateY(100%) rotateX(90deg); -moz-transform: translateY(100%) rotateX(90deg); -ms-transform: translateY(100%) rotateX(90deg); transform: translateY(100%) rotateX(90deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; transform-origin: 0 100%; opacity: 0; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }
.md-show.md-effect-7 .md-content { -webkit-transform: translateY(0%) rotateX(0deg); -moz-transform: translateY(0%) rotateX(0deg); -ms-transform: translateY(0%) rotateX(0deg); transform: translateY(0%) rotateX(0deg); opacity: 1; }

/* Effect 15:  3D Rotate in from left */
.md-effect-8.md-modal { -webkit-perspective: 1300px; -moz-perspective: 1300px; perspective: 1300px; }
.md-effect-8 .md-content { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateZ(100px) translateX(-30%) rotateY(90deg); -moz-transform: translateZ(100px) translateX(-30%) rotateY(90deg); -ms-transform: translateZ(100px) translateX(-30%) rotateY(90deg); transform: translateZ(100px) translateX(-30%) rotateY(90deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; transform-origin: 0 100%; opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; }
.md-show.md-effect-8 .md-content { -webkit-transform: translateZ(0px) translateX(0%) rotateY(0deg); -moz-transform: translateZ(0px) translateX(0%) rotateY(0deg); -ms-transform: translateZ(0px) translateX(0%) rotateY(0deg); transform: translateZ(0px) translateX(0%) rotateY(0deg); opacity: 1; }