/*
Theme Name: Medica Child
Theme URI: http://themefuse.com/wp-themes-shop/medica/
Description: Child theme for the Medica. Child themes are the recommended way of making modifications to a theme. <a href="http://codex.wordpress.org/Child_Themes">Read More</a>
Author: ThemeFuse
Author URI: http://themefuse.com
Template: medica-parent
*/

@import url("../medica-parent/style.css");

/* GLOBALS */

body {
max-width: 960px;
min-width: 320px;
margin: 0 auto;
}

.header, .footer, .middle {
display: block;
max-width: 960px;
width: 100%;
position: relative}

.contentBlock {
display: flex;
flex-flow: row wrap;
max-width: 620px;
width: 100%;
justify-content: space-around;
}

.half {
font-size: 1.2em;
text-align: justify;
flex: 2 0px;
align-self: flex-start;
min-width: 300px;
padding: 0 0 15px 0;
}

.dropBlock {
display: none
}

.headerButton {
font-weight: bold;
text-align: center;
padding: 0 10px;
background: rgb(8, 95, 117);
border-radius: 3px;
position: relative;
border: solid 1px rgb(8, 95, 117);
cursor: pointer;
font-size: 1em;
font-weight: bold;
text-shadow: none !important;
}

.headerButton:hover {background: #3cb0fd; text-decoration: none;}
.headerButton{
width: auto;
border: none;
background: rgb(8, 95, 117);
}

/* GLOBALS */

/* HEADER START */
.headerBlock {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-flow: row wrap;
max-width: 960px;
min-width: 300px;
width: 100%;
justify-content: space-around;
margin: 10px 0 0 0;
}

.fullHeader, #headMenu{
flex: 1 auto;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-flow: row wrap;
max-width: 960px;
min-width: 300px;
width: 100%;
justify-content: flex-start;
align-items: flex-start;
}

.halfHeader {
font-size: 1.2em;
flex: 2 0px;
align-self: flex-start;
align-self: center;
}

.headerMenu{
font-size: 1.1em;
font-weight: 600;
padding: 10px 0;
flex: 1 1 auto;
height: 24px;
align-self: flex-start;
align-self: center;
text-align: center;
background: none;
}


.headerMenu:hover {
background: rgb(60, 176, 253);
}

.headerMenu a, .home span {
color: #FECD40;
cursor: pointer;
width: 100%;
}

#headImage {
width:100%
height:auto;
}

.thirdHeader {
font-size: 1.2em;
align-self: center;
}

/* HEADER END */

.fullBlock, .middleBlock {
width: 100%;
height: 100%;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center}

/* MIDDLE START */

.middleBlock {
height: auto;
}

.middleBlock h1 {
font-size: 2.8em;
font-weight: 800;
color: #7EA034;
padding: 10px 0 10px 0;
margin: 0;
text-align: left
}

.middleContent p {
padding: 0 0 15px 0;
font-size: 1em; 
color: #555655
}

.middleContent h3{
font-size: 1.75em;
color: #085F75;
padding: 10px 20px 10px 0px;
margin: 0;
font-weight: bold
}


.middleContent h2{
font-size: 1.325em;
color: #7EA034 !important;
padding: 10px 20px 10px 0px;
margin: 0;
font-weight: bold
}

.middleContent, .sideBar {
flex: 1 1 auto;
align-self: flex-start;
}

.middleContent {
position: relative;
max-width: 700px;
min-width: 300px;
width: 100%;
flex: 0 1 auto;
}


/* MIDDLE END */

/* SIDE BAR START */

.sideBar {
flex: 0 1 260px;
}

.sideBlock {
border-radius: 3px;
display: block;
min-height: 93px;
margin: 15px;
padding: 10px;
background: #FECD40;
-webkit-box-shadow: 0px 0px 12px 1px rgba(128,128,128,1);
-moz-box-shadow: 0px 0px 12px 1px rgba(128,128,128,1);
box-shadow: 0px 0px 12px 1px rgba(128,128,128,1)}

.sideBlock > *, .sideBlock h3 {
padding: 0;
text-align: left;
}

.sideBlock h3 {font-weight: bold;}

.sideBar h3, .sideBar a {
color: #085F75; 
}
.sideBlock p {font-size: 1em; color: #555655}

/* SIDE BAR END */

.footer .fullBlock, .middle .fullBlock {
flex-flow: row wrap;
justify-content: space-around;
align-items: stretch}

.footer {border-top: solid 5px #FECD40}

.footerItem {
color: #394547;
padding: 5px 0;
margin: 0}

.footerItem {
width: 240px;
padding-top: 10px;
text-align: left;
font-weight: bold;
font-size: .9em !important}

#copyW {font-weight: bold}

.footer {padding-top: 15px !important}

@media only screen and (min-width:438px){
.home {display: none}
}

@media only screen and (max-width:438px) and (min-width: 0){
.mainMenu{flex-flow: column wrap;}
#headImage{display: none}
#smallHead {display: block !important}
.home {height: 24px; padding: 10px 0; width: 100%}
.hide {height: 0; padding: 0;}
.hide a {display: none}
#imagemap {display: none}
.mainMenu:hover .hide{height: 24px; padding: 10px 0; width: 100%}
.mainMenu:hover a{display: inline}
}

@media only screen and (max-width:560px) and (min-width: 0){
.middleBlock {
flex-flow: column wrap; 
}
.sideBar {width: 100%}
}

#sff {display:none}

.footerItem li {padding: 0; margin: 0 !important}

.footerItem ul {cursor: pointer}

.footerItem ul:hover #sff {
display: block;
}