/* STANDARDS ELEMENTS */


            html{font-family: sans-serif; font-size: 16px;}

           :root{--primary-color:#eee21a;--hover-color:#888832;--accent-color:#4471FF;--text-color:#362653}
           *{margin:0; padding:0;}

            .logo{display:flex; justify-content: center;  align-items: center;}
            .menu{text-align:center;}
            .links-container{margin:0; padding:0;  align-items:center;justify-content: center;}
                a{display: inline-flex; line-height: 1.6; padding: 3px 10px; border-radius:3px; text-decoration: none; color: var(--text-color);}
                a:hover{background-color:#f0edf6;}
                a:active{color:blue;}
                
              /*  svg{fill:var(--text-color);}    */

            #banner{display:flex; height:350px; justify-content: center;  align-items: center; background-image:url("images/GYN_BANNER.png");background-size: 2000px 350px; background-position: center;background-repeat: no-repeat;} 
            .label1{text-align: center;line-height: 250%;}

            #main-content{padding:30px 100px; justify-content: center;  align-items: center; background-color:#f3f0f9;} 
            .label2{min-height:500px; padding: 20px; text-align: center; align-items: center; background-color:#ffffff}
            .more {width:100%; height:100%; white-space: normal; overflow: hidden; text-overflow: ellipsis; display: block; margin: auto; }
            .less {width:100%; height:200px; white-space: normal; overflow: hidden; text-overflow: ellipsis; display: block; margin: auto; }


            #footer{padding:40px; justify-content: center;  align-items: center; background-color:#4a1fa0} 
            .label3{min-height:50px; padding: 20px; text-align: center; color:#ffffff; background-color:#4a1fa0}

            #main div:nth-of-type(1) {flex-grow: 1;}
            #main div:nth-of-type(2) {flex-grow: 2;}
            #main div:nth-of-type(3) {flex-grow: 1;}
            #main div:nth-of-type(4) {flex-grow: 6;}
            #main div:nth-of-type(5) {flex-grow: 1;}

           #sidebar-active{display:none;}
           .open-sidebar-button, .close-sidebar-button{display:none;}

           .open-subguide{padding:10px; display:inline-flex;}
           .guide-drop {  display: none;  position: absolute;  background-color: #f9f9f9;border-radius:3px;  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);  padding: 12px 16px;  z-index: 1;}
           .open-subguide:hover .guide-drop{display:grid;}

           .open-zone{padding:10px; display:inline-flex; }
           .zone-drop {  display: none;  position: absolute;  background-color: #f9f9f9;border-radius:3px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);  padding: 12px 16px;  z-index: 1;}
           .open-zone:hover .zone-drop{display:grid;}

            .button {background-color:#a01f5b; border: none;border-radius: 8px; color: white; text-align: center; text-decoration: none; display: inline-block; font-size: 32px; padding: 15px 32px; cursor: pointer;}
            .buttonsmall {background-color:#a01f5b; border: none;border-radius: 8px; color: white; text-align: center; text-decoration: none; display: inline-block; font-size: 13px; padding: 10px 15px; cursor: pointer;}


           @media(max-width:1000px)
           {
           
            .menu{text-align:right;}
           #banner{height:200px; background-image:url("images/GYN_BANNER.png");background-size: auto 100%; background-position: center;background-repeat: no-repeat;} 

            .links-container{display:block;position:fixed; top:0; right:-100%;z-index:10; width: 100%;height:100%;background-image: url("images/pregnancy.png");background-position: center;background-size: cover;transition:0.75s ease-out;}
         a{ height: auto; width:100%; padding:3px 0px; justify-content:center; }

           .open-subguide{display:grid; box-sizing: content-box;height: auto; width:100%, padding: 3px 30px; justify-content: center;}
           .open-zone{display:grid; box-sizing: content-box;height: auto; width:100%, padding: 3px 30px; justify-content: center;}
            .open-subguide:hover .guide-drop{display:grid; justify-content: start; position:relative; z-index:0;}
            .open-zone:hover .zone-drop{display:grid; justify-content: start; position:relative; z-index:0;}        
           .open-sidebar-button,.close-sidebar-button{padding:20px; display:block;}
           #sidebar-active:checked ~ .links-container{right:0;} 
            .close-sidebar-button{text-align:center;}

            #date{display:none;}

            #main-content{padding:10px 10px; justify-content: center;  align-items: center; background-color:#f3f0f9;}

           }

input, select, textarea {font-size: 16px;}
input[type=text] {    width: 100%;     padding: 5px 20px;     margin: 3px 0;     box-sizing: border-box;     border: 3px solid #ccc;  -webkit-transition: 0.5s;     transition: 0.5s;     outline: none;  }
input[type=text]:focus { 3px solid #555;     background-color: #f3f0f9; }

input[type=date] {    width: 100%;     padding: 3px 20px;     margin: 3px 0;     box-sizing: border-box;     border: 3px solid #ccc;  -webkit-transition: 0.5s;     transition: 0.5s;     outline: none;  }
input[type=date]:focus { 3px solid #555;     background-color: #f3f0f9; }

select, textarea{    width: 100%;     padding: 5px 20px;     margin: 3px 0;     box-sizing: border-box;     border: 3px solid #ccc;  -webkit-transition: 0.5s;     transition: 0.5s;     outline: none;  }
select:focus, textarea:focus { 3px solid #555;     background-color: #f3f0f9; }


input.delete {float: none;min-width: 200px;font-size: 16px; color:#FFFFFF; margin: 0;padding: 12px 20px;background:#FF0000;}

/* The container */
.con { display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

/* Hide the browser's default radio button */
.con input {     position: absolute;     opacity: 0; }

/* Create a custom radio button */
.checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; border-radius: 50%; }

/* On mouse-over, add a grey background color */
.con:hover input ~ .checkmark {     background-color: #ccc;  }

/* When the radio button is checked, add a blue background */
.con input:checked ~ .checkmark {      background-color: #2196F3;  }

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {       content: "";     position: absolute;      display: none;  }

/* Show the indicator (dot/circle) when checked */
.con input:checked ~ .checkmark:after {     display: block; }

/* Style the indicator (dot/circle) */
.con .checkmark:after { top: 9px; left: 9px; width: 8px; height: 8px; border-radius: 50%; background: white; }




ul.home li {list-style-image: url('images/li.gif');text-align:left;}

.small {text-align:center; color:#000088; font-size: 11px;}
.med {text-align:center; color:#000000; font-size: 13px;font-weight: bold;}
.black {text-align:center; color:#000000; font-size: 13px;font-weight: bold;}
.blackleft {text-align:left; color:#000000; font-size: 13px;font-weight: bold;}
.blackright {text-align:right; color:#000000; font-size: 13px;font-weight: bold;}
.blackbig {text-align:center; color:#000000; font-size: 24px;font-weight: bold;}
.red {display:inline;text-align:left; color:#FF0000; font-size: 13px;font-weight: bold;}
.redbig {text-align:center; color:#FF0000; font-size: 16px;font-weight: bold;}
.whiteright {text-align:right; vertical-align:top; color:#FFFFFF; font-size: 13px; font-weight: bold;}
.whitebig {text-align:center; vertical-align:center; color:#FFFFFF; font-size: 16px; font-weight: bold;}
.whiteleft {text-align:left; vertical-align:top; color:#FFFFFF; font-size: 13px; font-weight: bold;}
.green {text-align:left; color:#008800; font-size: 13px;font-weight: bold;}
.greenbig {text-align:center; color:#008800; font-size: 16px;font-weight: bold;}
.blue {text-align:center; color:#000088; font-size: 13px;font-weight: bold;}
.bluebig {text-align:center; color:#000088; font-size: 16px;font-weight: bold;}
.bluemax {text-align:center; color:#000088; font-size: 24px;font-weight: bold;}
.light {text-align:center; color:#f3f0f9; font-size: 13px;font-weight: bold;}
.lightbig {text-align:center; color:#f3f0f9; font-size: 16px;font-weight: bold;}
.violin {text-align:center; color:#5831a7; font-size: 13px;font-weight: bold;}
.violinbig {text-align:center; color:#5831a7; font-size: 16px;font-weight: bold;}
.pink {text-align:center; color:#ac6eb5; font-size: 13px;font-weight: bold;}
.pinkbig {text-align:center; color:#ac6eb5; font-size: 16px;font-weight: bold;}
.bordo {text-align:center; color:#a01f5b; font-size: 13px;font-weight: bold;}
.bordobig {text-align:center; color:#a01f5b; font-size: 16px;font-weight: bold;}