html, body {background-color:#FFFFFF; height: 100%;font-family:Arial, Helvetica, sans-serif; margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;}
a{
color:#CC9900;
font-weight:bold;
}
a:hover{
color:#CC6600;
}
a:visited{
color:#7F4F03;
font-weight:normal;
}
#headertopQueens{
background-position: static;
background-size: cover;
height:355px;
background-image: url(entorno-bengalies/hembras-bengalies.jpg);
}
#headertopContact{
background-position: static;
background-size: cover;
height:355px;
background-image: url(entorno-bengalies/contactar-bengalies.jpg);
}
#headertopPrice{
background-position: static;
background-size: cover;
height:355px;
background-image: url(entorno-bengalies/precio-bengali-header.jpg);
}
#headertopPrev{
background-position: static;
background-size: cover;
height:355px;
background-image: url(entorno-bengalies/camadas-anteriores.jpg);
}
#headertopStuds{
background-position: static;
background-size: cover;
height:355px;
background-image: url(entorno-bengalies/machos-bengalies.jpg);
}
#headertopSalud{
background-position: static;
background-size: cover;
height:355px;
background-image: url(entorno-bengalies/salud-bengali.jpg);
}
#headertopCreci{
background-position: static;
background-size: cover;
height:355px;
background-image: url(entorno-bengalies/crecimiento-bengali.jpg);
}
#headertopClass{
background-position: static;
background-size: cover;
height:355px;
background-image: url(entorno-bengalies/clases-bengalies-clouded.jpg);
}
#headertopMainHisBeng{
background-position: static;
background-size: cover;
height:355px;
background-image: url(entorno-bengalies/historia-bengalies-toryofdelhi3.jpg);
}
#headertopMainHis{
background-position: static;
background-size: cover;
height:355px;
background-image: url(entorno-bengalies/el-gato-bengali.jpg);
}
#headertopMain{
background-position: static;
background-size: cover;
height:365px;
background-image: url(entorno-bengalies/el-gato-bengali.jpg);
}
#headerkitten{
width:100%;
background-position: static;
background-size: cover;
height:355px;
background-image: url(entorno-bengalies/ramazan-asha.jpg);
}
#headerkittenCaracter{
width:100%;
background-position: static;
background-size: cover;
height:355px;
background-image: url(entorno-bengalies/caracter-del-gato-bengali.jpg);
}
#headerFeatures{
width:100%;
background-position: static;
background-size: cover;
height:355px;
background-image: url(entorno-bengalies/caracteristicas-del-gato-bengal.jpg);
}
.kittenbg{
}
#container{
margin: 0 auto;
max-width: 100%;
}
header {
width: 100%;
}
header #title {
font-size: 50px;
color: #fff;
}
#fotoSlide{
width:100%;
margin: 0 auto;
}
#content {
float: left;
padding: 3%;
width: 64%;
}
#contentWide {
float: left;
padding: 3%;
width: 85%;
}
aside {
float: right;
padding: 3%;
width: 24%;
}
aside1 {
float: right;
padding: 2%;
width: 30%;
}
#content1 {
float: left;
padding: 2%;
width: 60%;
color:#663300;
font-size:0.90em;
font-weight:bold;
}
#sidebar1{
color:#663300;
font-size:0.80em;
text-align: right;
margin-right:22px;
}
#galeria{
width:100%;
}
#galeriaL{
float: left;
padding: 1%;
width: 32%;
font-size:0.9em;
}
#galeriaR{
float: right;
padding: 2%;
width: 62%;
}
#galeriaRBook{
float: right;
padding: 2%;
width: 62%;
}
.datepub{
font-size:0.8em;
color:#FFAE5E;
padding-top:8px;
}
.dispoCamada{
background-color:#7F4F03;
color:#FFFFFF;
width:100%;
font-size:1.2em;
padding:3px;
text-indent:7px;
}
.dispoSubtitulo{
font-size:0.8em;
font-style:italic;
}
.dispoNotas{
font-size:0.8em;
}
.dispoGreen{
color:#99CC00;
}
.dispoNar{
color:#FF9900;
}
.dispoRed{
color:#FF0000;
}
footer{
width: 94%;
padding: 3%;
background:#9a740f;
background-image:url(entorno-bengalies/bgfooter.jpg);
background-repeat:repeat-x;
}
footer a{
color:#FFFFFF;
}
.clearfix{
clear:both;
/*this is to clear the float property*/
}
.items {
overflow: hidden; /* simple clearfix */
}
.items .item {
float: left;
width: 24%;
box-sizing: border-box;
color: #fff;
padding: 10px;
}
.items a, .item a{
color:#FFFFFF;
text-decoration:none;
}
.items a:hover, .item a:hover{
color:#FFCC00;
}
.topitems {
float: left;
width:100%;
box-sizing: border-box;
color: #fff;
}
.topitemsKit {
max-width:100%;
padding: 3px 5px 10px 3px;
}
.topitem1 {
padding:5px 0px 0px 25px;
float:left;
width:50%;
box-sizing: border-box;
color: #fff;
}
.topitem1Logo {
padding:5px 0px 2px 25px;
float:left;
width:50%;
box-sizing: border-box;
color:#663300;
font-size:0.90em;
font-weight:bold;
}
.topitem1Logo {
padding:5px 0px 2px 25px;
float:left;
width:50%;
box-sizing: border-box;
color:#663300;
font-size:0.90em;
font-weight:bold;
}
.topitem2 {
padding:5px 25px 0px 0px;
float:left;
width:50%;
box-sizing: border-box;
text-align:right;
font-family:Arial, Helvetica, sans-serif;
font-size:0.9em;
color:#9a740f;
}
#sectionBlock{
font-size:0.9em;
margin:10px 0px 25px 0px;
}
.sectionText{margin:10px 0px 10px 0px;}
.sectionPic{float:left;}
.sectionPicRight{float:right;}
.sectionDesc{margin:0px;}
.fotobasic{
border:solid 1px #9a740f;
margin:0px 10px 0px 10px;
}
.fotobasicSidebar{
border:solid 1px #9a740f;
margin:10px;
}
.fotoDisponibles{
border:solid 1px #9a740f;
margin:5px 5px 5px 0px;
}
.fotobasicSidebarNL{
margin:10px;
}
.fotoInsideText{
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
border: 1px solid #FB7501;
}
.foto{
margin-right:8px;
border:solid 1px #FF9900;
}
.fotoGaleria{
border:solid 1px #9a740f;
margin-bottom:5px;
}
#fotoGallery{
float:left;
margin: 0px 0px 15px 15px;
width:15%;
}
#imagewithcaptionG {
float:left;
width: 15%;
text-align:center;
font-size:0.7em;
font-weight:bold;
}
#imagewithcaption {
float:left;
width: 35%;
text-align:center;
font-size:0.7em;
font-weight:bold;
margin-right:15px;
}
#imagewithcaptionAnt {
float:left;
width: 40%;
margin-right:20px;
padding:0px 30px 10px 30px;
text-align:left;
font-size:0.7em;
font-weight:bold;
}
.users{
text-align:right;
color:#fff;
font-weight:bold;
font-size:0.75em;
background-color:#996600;
margin-bottom:10px;
padding:2px 5px 2px 2px;
}
.centerPics{
}
.fotoright{
margin-left:8px;
border:solid 1px #FF9900;
}
.tituloBasico{
font-size:18px;
color:#9a740f;
font-weight:bold;
border-bottom:1px solid #de9e0c;
}
.tituloSecciones{
font-size:1.8em;
color:#7F4F03;
font-weight:bold;
border-bottom:1px solid #de9e0c;
margin:0px;
}
.subtituloExpo{
font-weight:bold;
color:#CC9900;
text-decoration:underline;
}
.subtituloExpo a{
font-weight:bold;
color:#CC9900;
text-decoration:underline;
}
.subtituloVideo{
color:#7F4F03;
}
.subtitulo{
margin-top:5px;
font-size:14px;
font-weight:bold;
}
.textoBasico{
font-size:0.9em;
}
.bloque{
padding-bottom:20px;
}
h1{
font-size:1.8em;
}
h3{
color:#7F4F03;
font-weight:bold;
font-size:1.6em:
}
.w3-content{width:100%; margin:0px;}
.w3-display-container{position:relative}.w3-tooltip .w3-text{display:none}.w3-tooltip:hover .w3-text{display:inline-block}
.w3-display-container:hover .w3-display-hover{display:block}.w3-display-container:hover span.w3-display-hover{display:inline-block}.w3-display-hover{display:none}
.w3-btn,.w3-button{border:none;display:inline-block;outline:0;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
.w3-btn:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
.w3-btn,.w3-button{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.w3-disabled,.w3-btn:disabled,.w3-button:disabled{cursor:not-allowed;opacity:0.3}.w3-disabled *,:disabled *{pointer-events:none}
.w3-dropdown-hover:hover > .w3-button:first-child,.w3-dropdown-click:hover > .w3-button:first-child{background-color:#ccc;color:#000}
.w3-bar-block .w3-dropdown-hover .w3-button,.w3-bar-block .w3-dropdown-click .w3-button{width:100%;text-align:left;padding:8px 16px}
.w3-bar .w3-button{white-space:normal}
.w3-button:hover{color:#000!important;background-color:#ccc!important}
.w3-black,.w3-hover-black:hover{color:#fff!important;background-color:#000!important}
.w3-display-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}
.w3-display-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)}
.mySlides{width:100%;}
/******************************** Nav Menu *****************************/
.menu{
width: 100%;
background-color: #9a740f;
}
/* This is the very basic steps of creating a horizontal menu */
/* Reset from the regular list definitions above */
.menu, .menu ul, .menu ul li, .menu ul li a,
.menu ul ul, .menu ul ul li, .menu ul ul li a {
margin: 0;
padding: 0;
border: 0;
line-height: 1;
}
/* Clearfix needed only in case of floating the LI, but not when using the inline method.
.menu:after, .menu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
*/
/* list-style-type: none to remove the bullets.
text-align: center in combination with LI set to inline is centering the whole menu, great.
If inline cannot be used due to the white-space problem, check this method for absolute centering:
http://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/ */
.menu ul {
list-style-type: none;
text-align: left;
}
/* position: relative is needed for the position: absolute of submenu to refer to its parent element.
LI needs to be set to inline to go into horizontal.
The only disadvantage compared to float:left is a mysterious 4px gap between the elements -
on how to remove it see https://css-tricks.com/fighting-the-space-between-inline-block-elements/
text-align: center makes the A links centered inside their LI containers, only makes sense if A links have a fixed width */
.menu ul li {
position: relative;
display: inline;
text-align: center;
color: #fff;
font-size:14px;
}
/* text-decoration: none is needed to remove the underlining of links.
display: inline-block is needed to apply a fixed width or padding to this otherwise inline element of A. */
.menu ul li a {
text-decoration: none;
display: inline-block;
width: 115px;
padding: 10px;
color: #fff;
font-size:14px; /*specify here the font size, it will affect the submenu too*/
}
/* Declaration of hover, focus and active state - can be done separately of course if desired */
.menu ul li a:hover, .menu ul li a:focus, .menu ul li a:active {
color: #330000;
}
/* Styling of the arrow that indicates a submenu and which by default is way too big. */
.menu-arrow {
font-size: 10px;
}
/******* Here starts the submenu section. *******/
/* First, the submenu is positioned in relation to the LI of parent absolutely.
To not be visible, there are three options: left-9999px, display: none or opactity.
I have chosen opacity because it allows smooth blending in while not having any disadvantages.
Using this method instead of display:none screenreaders will still be able to see the whole menu.
Yet on veeery large sites this might lead to an information overflow and display:none here and display:initial on the next item might be preferable:
http://manwithnoblog.com/2009/12/06/the-case-for-the-use-of-display-none/ */
.menu ul ul {
position: absolute;
left:0;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */
filter: alpha(opacity=0); /* IE 5-7 */
z-index:2;
}
/* When the parent LI is hovered, submenu is made visible. */
.menu ul li:hover ul {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE 8 */
filter: alpha(opacity=100); /* IE 5-7 */
}
/* The LI of the submenu are set back to block, so they are aligned vertically again.
Also text-align is set back to left, because centered entries don't look good in the submenu.*/
.menu ul ul li {
display: block;
text-align: left;
}
/* Styling of the submenu entries.
Width: 100% is needed here so the border goes to the end of the LI which is giving the width based on the longest entry.
Min-width is set to have a more consistent appearance if some submenu items would otherwise be very short.
White-space is set to nowrap so they stay in one line.
Border bottom is simply a nice thing in a submenu :) */
.menu ul ul li a {
width: 100%;
min-width:115px;
padding: 10px;
white-space: nowrap;
font-size:14px; /*change font size if you want*/
color: #fff;
background: #de9e0c;
}
/* Declaration of hover, focus and active state - can be done separately of course if desired */
.menu ul ul li a:hover, .menu ul ul li a:focus, .menu ul ul li a:active {
color: #fff;
background:#9a740f;
}
/******* Goodies *******/
/* Applying smooth transitions on color changes and opacity fade in of dropdown menu.
As of June 2015 and according to caniuse.com, this two should be enough, since anyhow no harm will be done in older browsers that simply loose the smoothness but not functionality. */
.menu ul li a, .menu ul ul li, .menu ul li:hover, .menu ul ul {
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
/* Styles and hides the responsive button.
This is a pure CSS solution for the moment, using an invisible checkbox as toggle element. */
.responsive-button {
padding:10px;
font-weight: bold;
color:#663300;
text-align: left;
display: none;
}
.spaceBut{
margin-right:8px;
}
/* Permanently hides the checkbox that helps us as a menu toogle element */
input[id=responsive-button] {
display: none;
}
/* Shows menu when invisible checkbox is checked */
input[id=responsive-button]:checked ~ .menu {
display: block;
}
#logo{
display:none;
}
#headerLogo{
float: left;
margin-left:25px;
width: 25%;
}
#contactDetails{
margin-right:25px;
text-align:right;
font-family:Arial, Helvetica, sans-serif;
font-size:0.9em;
color:#9a740f;
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
.videoWrapper iframe,
.videoWrapper object,
.videoWrapper embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#form-div {
background-color:#d4c25e;
padding:15px;
width: 80%;
margin-top:30px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}
.feedback-input {
color:#7F4F03;
font-family: Helvetica, Arial, sans-serif;
font-weight:500;
font-size: 18px;
border-radius: 0;
line-height: 22px;
background-color: #fbfbfb;
padding: 13px 13px 13px 54px;
margin-bottom: 10px;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
border: 2px solid rgba(0,0,0,0);
}
.feedback-input:focus{
background: #fff;
box-shadow: 0;
border: 2px solid #CC9900;
color:#996600;
outline: none;
padding: 13px 13px 13px 54px;
}
.focused{
color:#996600;
border:#30aed6 solid 3px;
}
/* Icons ---------------------------------- */
#name{
background-image:url(entorno-bengalies/form-name.jpg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#name:focus{
background-image: url(entorno-bengalies/form-name.jpg);
background-size: 30px 30px;
background-position: 8px 5px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#email{
background-image:url(entorno-bengalies/form-email.jpg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#email:focus{
background-image: url(entorno-bengalies/form-email.jpg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#message{
background-image: url(entorno-bengalies/form-pen.jpg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#apellidos{
background-image: url(entorno-bengalies/form-name.jpg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#telefono{
background-image: url(entorno-bengalies/form-tel.jpg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#dni{
background-image: url(entorno-bengalies/form-dni.jpg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#nomcat{
background-image: url(entorno-bengalies/form-catname.jpg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#direccion, #cp, #ciudad, #pais{
background-image: url(entorno-bengalies/form-address.jpg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
textarea {
width: 100%;
height: 150px;
line-height: 150%;
resize:vertical;
}
input:hover, textarea:hover,
input:focus, textarea:focus {
background-color:white;
}
#button-blue{
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
float:left;
width: 100%;
border: #fbfbfb solid 2px;
cursor:pointer;
background-color:#996600;
color:white;
font-size:20px;
padding-top:10px;
padding-bottom:10px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
margin-top:-4px;
font-weight:700;
}
#button-blue:hover{
background-color: rgba(0,0,0,0);
color:#996600;
}
.submit:hover {
color: #3498db;
}
.ease {
width: 0px;
height: 38px;
background-color: #fbfbfb;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-o-transition: .3s ease;
-ms-transition: .3s ease;
transition: .3s ease;
}
.submit:hover .ease{
width:100%;
background-color:white;
}
.collapsible {
background-color: #CC9900;
color: #663300;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 0.90em;
font-weight: bold;
}
.active, .collapsible:hover {
background-color: #663300;
color: #fff;
}
.collapsible:after {
content: '\002B';
color: white;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.content5 {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
@media all and (max-width : 768px) {
header {
text-align: center;
}
nav {
text-align: center;
}
#content {
width: 94%;
padding: 3%;
}
#content1 {
width: 94%;
padding: 3%;
}
#sidebar {
width: 94%;
padding: 3%;
}
#sidebar1{
display: none;
}
#headertopContact{
background-position: static;
background-size: cover;
height:300px;
background-image: url(entorno-bengalies/contactar-bengalies2.jpg);
}
#headertopQueens{
background-position: static;
background-size: cover;
height:300px;
background-image: url(entorno-bengalies/hembras-bengalies2.jpg);
}
#headertopPrice{
background-position: static;
background-size: cover;
height:300px;
background-image: url(entorno-bengalies/precio-bengali-header2.jpg);
}
#headertopPrev{
background-position: static;
background-size: cover;
height:300px;
background-image: url(entorno-bengalies/camadas-anteriores2.jpg);
}
#headertopStuds{
background-position: static;
background-size: cover;
height:300px;
background-image: url(entorno-bengalies/machos-bengalies2.jpg);
}
#headertopSalud{
background-position: static;
background-size: cover;
height:300px;
background-image: url(entorno-bengalies/salud-bengali2.jpg);
}
#headertopCreci{
background-position: static;
background-size: cover;
height:300px;
background-image: url(entorno-bengalies/crecimiento-bengali2.jpg);
}
#headertopClass{
background-position: static;
background-size: cover;
height:300px;
background-image: url(entorno-bengalies/clases-bengalies-clouded2.jpg);
}
#headertopMainHisBeng{
background-position: static;
background-size: cover;
height:300px;
background-image: url(entorno-bengalies/historia-bengalies-toryofdelhi2.jpg);
}
#headertopMainHis{
background-position: static;
background-size: cover;
height:300px;
background-image: url(entorno-bengalies/historia-ramazan2.jpg);
}
#headertopMain{
background-position: static;
background-size: cover;
height:300px;
background-image: url(entorno-bengalies/el-gato-bengali3.jpg);
}
#headerFeatures{
width:100%;
background-position: static;
background-size: cover;
height:355px;
background-image: url(entorno-bengalies/caracteristicas-del-gato-bengal2.jpg);
}
#headerkitten{
background-position: static;
background-size: cover;
height:220px;
background-image: url(entorno-bengalies/ramazan-asha-mob.jpg);
}
#headerkittenCaracter{
background-position: static;
background-size: cover;
height:220px;
background-image: url(entorno-bengalies/caracter-del-gato-bengali2.jpg);
}
.w3-button{
margin-top:25px;
padding:5px;
}
.menu {
display: none;
}
/*aside{
width:100%;
margin-left:10px;
}*/
/* Reset menu items position to stack up vertically.
Adding a bottom line for better separation. */
.menu ul li {
display: block;
border-bottom: 1px solid #ccc;
background-color:#7f4f03;
padding:10px;
}
/* Making all items full width */
.menu ul li, .menu ul li a {
width: 100%;
font-size:1.2rem;
}
.menu ul ul li a {
font-size:1.2rem;
}
/* Reset to position: relative is needed so the submenu is opening inside the element flow, not covering the following parent menu items.
This is why hiding them can not be done with the left:-9999px method, and also opacity doesn't work here because it leaves an empty space between the parent items.
So for the moment it seems that responsive dropdown menus can not be accomplished accessible using CSS only. */
.menu ul ul {
position: relative;
display: none;
}
/* Showing the submenu */
.menu ul li:hover ul {
display: block;
}
/* text-align is now set to center, because left entries don't look good in a responsive submenu. */
.menu ul ul li {
text-align: center;
}
.menu-arrow {
font-size: 30%;
}
/*********************************/
/* Shows the responsive button */
.responsive-button {
display: block;
min-width:100%;
}
#logo{
position:relative;
display:block;
width:100%;
height:auto;
}
}
@media only screen and (max-width: 480px) {
.buybook {
display: block !important;
max-height: none !important;
overflow: visible !important;
}
.booklink{
display: none;
}
#barraaceptacion{
display:none;
position:relative;
left:0px;
right:0px;
bottom:20px;
padding-top:80px;
width:80%;
text-align:left;
min-height:80px;
background-color: rgba(0, 0, 0, 0.5);
color:#fff;
z-index:99999;
}
.inner {
width:80%;
position:relative;
padding-left:5px;
font-family:verdana;
font-size:12px;
top:50%;
}
}
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (-webkit-min-device-pixel-ratio: 2){
html,body {
font-size:1rem;
width:100%;
}
#headertopContact{
background-position: static;
background-size: cover;
height:230px;
background-image: url(entorno-bengalies/contactar-bengalies3.jpg);
}
#headertopQueens{
background-position: static;
background-size: cover;
height:230px;
background-image: url(entorno-bengalies/hembras-bengalies3.jpg);
}
#headertopPrice{
background-position: static;
background-size: cover;
height:230px;
background-image: url(entorno-bengalies/precio-bengali-header3.jpg);
}
#headertopPrev{
background-position: static;
background-size: cover;
height:230px;
background-image: url(entorno-bengalies/camadas-anteriores3.jpg);
}
#headertopStuds{
background-position: static;
background-size: cover;
height:230px;
background-image: url(entorno-bengalies/machos-bengalies3.jpg);
}
#headertopSalud{
background-position: static;
background-size: cover;
height:230px;
background-image: url(entorno-bengalies/salud-bengali3.jpg);
}
#headertopCreci{
background-position: static;
background-size: cover;
height:230px;
background-image: url(entorno-bengalies/crecimiento-bengali3.jpg);
}
#headertopClass{
background-position: static;
background-size: cover;
height:230px;
background-image: url(entorno-bengalies/clases-bengalies-clouded3.jpg);
}
#headertopMainHisBeng{
background-position: static;
background-size: cover;
height:230px;
background-image: url(entorno-bengalies/historia-bengalies-toryofdelhi.jpg);
}
#headertopMainHis{
background-position: static;
background-size: cover;
height:230px;
background-image: url(entorno-bengalies/historia-ramazan.jpg);
}
#headertopMain{
background-position: static;
background-size: cover;
height:220px;
background-image: url(entorno-bengalies/el-gato-bengali2.jpg);
}
#headerFeatures{
width:100%;
background-position: static;
background-size: cover;
height:220px;
background-image: url(entorno-bengalies/caracteristicas-del-gato-bengal2.jpg);
}
#headerkitten{
background-position: static;
background-size: cover;
height:220px;
background-image: url(entorno-bengalies/ramazan-asha-mob.jpg);
}
#headerkittenCaracter{
background-position: static;
background-size: cover;
height:220px;
background-image: url(entorno-bengalies/caracter-del-gato-bengali2.jpg);
}
.fotoInsideText{
margin:2px;
width:100%;
}
#form-div{
left: 3%;
margin-right: 3%;
width: 88%;
margin-left: 0;
padding-left: 3%;
padding-right: 3%;
}
#header{
/*display:none;*/
}
.w3-button{
margin-top:25px;
padding:5px;
}
.menu {
display: none;
}
/*aside{
width:100%;
margin-left:10px;
}*/
/* Reset menu items position to stack up vertically.
Adding a bottom line for better separation. */
.menu ul li {
display: block;
border-bottom: 1px solid #ccc;
background-color:#7f4f03;
padding:10px;
}
/* Making all items full width */
.menu ul li, .menu ul li a {
width: 100%;
font-size:1.2rem;
}
.menu ul ul li a {
font-size:1.2rem;
}
/* Reset to position: relative is needed so the submenu is opening inside the element flow, not covering the following parent menu items.
This is why hiding them can not be done with the left:-9999px method, and also opacity doesn't work here because it leaves an empty space between the parent items.
So for the moment it seems that responsive dropdown menus can not be accomplished accessible using CSS only. */
.menu ul ul {
position: relative;
display: none;
}
/* Showing the submenu */
.menu ul li:hover ul {
display: block;
}
/* text-align is now set to center, because left entries don't look good in a responsive submenu. */
.menu ul ul li {
text-align: center;
}
.menu-arrow {
font-size: 30%;
}
/*********************************/
/* Shows the responsive button */
.responsive-button {
display: block;
min-width:100%;
}
#logo{
position:relative;
display:block;
width:100%;
height:auto;
}
.items .item {
width:100%;
}
.topitems, .topitem1, .topitem2, .topitem1Logo {
width:100%;
}
.topitem1Logo {
padding: 3px 5px 10px 3px;
}
.topitem1{
padding-left:3px;
}
.topitem2{
display: none;
text-align:left;
padding-left:3px;
}
.fotobasic{width:90%;margin:0px;}
.sectionDesc{width:100%;}
#galeriaL{width:100%;}
#galeriaR{width:100%;}
#galeriaRBook{width:100%;}
#imagewithcaptionG {width:33%;}
#imagewithcaptionAnt{
margin-right:5px;
padding:0px 5px 0px 5px;
text-align:left;
font-size:0.7em;
font-weight:bold;
width:45%;}
}
@media (min-width: 620px) {
.items .item {
width:100%;
}
}
@media (min-width: 830px) {
.items .item {
max-width: calc(25% - 10px);
}
}
.showSlide {
display: none;
}
.showSlide img {
width: 100%;
}
.slidercontainer {
max-width: 250px;
position: relative;
}
.left, .right {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
.right {
right: 0;
border-radius: 3px 0 0 3px;
}
.left:hover, .right:hover {
background-color: rgba(115, 115, 115, 0.8);
}
.active {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
@keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
/*cookies infobox*/
#barraaceptacion {
display:none;
position:fixed;
left:0px;
right:0px;
bottom:0px;
padding-top:20px;
width:100%;
text-align:center;
min-height:40px;
background-color: rgba(0, 0, 0, 0.5);
color:#fff;
z-index:99999;
}
.inner {
width:100%;
position:relative;
padding-left:5px;
font-family:verdana;
font-size:12px;
top:30%;
}
.inner a.ok {
padding:4px;
color:#00ff2e;
text-decoration:none;
}
.inner a.info {
padding-left:5px;
text-decoration:none;
color:#faff00;
}
/*******************snowflake effect****************/
#snowflakeContainer {
position: absolute;
left: 0px;
top: 0px;
}
.snowflake {
padding-left: 15px;
font-family: Cambria, Georgia, serif;
font-size: 14px;
line-height: 24px;
position: fixed;
color: #FFFFFF;
user-select: none;
z-index: 1000;
}
.snowflake:hover {
cursor: default;
}
#form-div #website{ display:none; }
.schQ{
font-weight: bold;
text-decoration: underline;
color: #F46301;
}
.schA{
}