/* For 'e' logo in header AND footer)*/

/*The div re exists to give a 'title attribute' to, for a tool tip.  A title attribute wouldn't work when given in the svg tag*/
/*Is inlineblock, else, with the footer div, the tool tip appears when hover anywhere on the screen's whole width*/
.footer_logo_svg_container {
display:inline-block;
}


/* Can change colour of the fill (the 'inside'or maincolour) and the stroke(the perimeter) here.  Or can do it at the bottom of the svg code*/
.erectionpsych_logo_header {
/* This is just a little lighter than maroon (#800000) - which is the colour of the page reminder*/
fill: #8b0000;
stroke: #ffefd5;
stroke-width:4 ;
/*Need to specify height AND width, else overall shape - with background - isnt square, and then can't position without using a minus value (which, as I say immediately below, itself causes a problem)*/
height:35px;
width: 35px;
position: absolute;
/*Cannot have a a minus value cos causes horiz scroll bar to appear, and overflow:hidden doesnt't turn it off*/
right: 8px;
/*This value is media-queried below, in this value.  */
top:6px;
}


.erectionpsych_logo_footer {
/* This is just a little lighter than maroon (#800000) - which is the colour of the page reminder*/
fill: #8b0000;
stroke: #ffefd5;
stroke-width:4 ;
/*Need to specify height AND width, else overall shape - with background - isnt square, and then can't position without using a minus value (which, as I say immediately below, itself causes a problem)*/
height:35px;
width: 35px;
position: relative;
/*Cannot have a a minus value cos causes horiz scroll bar to appear, and overflow:hidden doesnt't turn it off*/
right: ;
/*This value is media-queried below, in this value.  */
top:;
}



.hyppsychologist_logo_header {
height:35px;
width: 35px;
position: absolute;
/*Cannot have a a minus value cos causes horiz scroll bar to appear, and overflow:hidden doesnt't turn it off*/
right: 8px;
/*This value is media-queried below, in this value.  */
top:6px;
/*would colour-in the square - the showing four corners of it, around the logo's circle*/
background:;
}

.hyppsychologist_logo_footer {
height:40px;
width: 40px;
position: relative;
/*would colour-in the square - the showing four corners of it, around the logo's circle*/
background:;
}




/*To partially rotate the logo upon hover.  For reasons I cannot find, during the rotation the lightness/size of the title & subtitle is reduced.  This reduction is especially noticeable when text colour is red; the lighter thetext colour the less the change is noticeable*/
.erectionpsych_logo_header:hover, .erectionpsych_logo_footer:hover {

/* Originally animation was called 'spin', but this made the logo actually spin.  Evidently some words serve the actual movement, thus an animation cannot be any name as I thought.  Hence I changed this animation to 'spin_up'*/

-webkit-animation: spin_up 1s linear 1;
animation: spin_up 1s/*alter spin speed*/ linear 1;

/*makes the last state of the animation stay on screen*/
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}

@-webkit-keyframes spin_up {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-50deg);
transform: rotate(-50deg);
}
}

@keyframes spin_up {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform:rotate(-30deg);
transform: rotate(-30deg);
}
}


/* MEDIA QUERIES */


/*510 is the media query upon which slide menu is in effect*/
/*Needed to compemsate for fact eLogo moves down a bit by itself when mobile size comes into effect.   Search: navsize*/
@media screen and (max-width: 510px){
.erectionpsych_logo_header {
top:3px;
}
}

/*510 is the media query upon which slide menu is in effect*/
/*Needed to compemsate for fact eLogo moves down a bit by itself when mobile size comes into effect.   Search: navsize*/
@media screen and (max-width: 510px){
.hyppsychologist_logo_header {
top:3px;
}
}

/* MOBILE media query*/
@media screen and (max-width: 425px){
.hyppsychologist_logo_header {
/*Reduces size of logo.  Logo otherwise looks bit too big in mobile size screens.*/
height:30px;
width: 30px;
/*Because logo's size has been reduced, it needs to move down a bit more*/
top: 4px;
background-color:;
}
}