/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');

b#socialicons img{ /* 1st set of icons. Rotate them 360deg onmouseover and out */
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
	transition: all 0.8s ease-in-out;
	padding: 0 2px;
}

b#socialicons img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
	padding: 0 2px;

}

body { font-family: 'Josefin Sans', sans-serif;	margin: 0 0 0 0; padding: 0 0 0 0; line-height: auto; background-color: #805423;}
a:link { color: #FCE0C3; text-decoration: none;}
a:visited { color: #FCE0C3;}
a:hover { color: #FCE0C3; text-decoration: none;}
a:active { color: #FCE0C3;}
.white { color: #FFFFFF; 	font-size: 36px; text-shadow: 0px 1px #cccccc;}
.name { color: #fff; font-size:36px; text-shadow: 0px 1px #7399C5;}
A.navlink {COLOR: #636363; TEXT-DECORATION: none; font-size: 20px; }
A.navlink:hover { COLOR: #FD4286; TEXT-DECORATION: noe; BORDER-BOTTOM: #FD4286 1px dotted;}
A.wlink {COLOR: #000; TEXT-DECORATION: none; font-size: 16px; text-shadow: 0px 1px #000000;}
A.wlink:hover { TEXT-DECORATION: noe; BORDER-BOTTOM: #000 1px dotted;}
.img-holder {position: relative;}
.img-holder .link { background-color: #7E5223; padding: 12px 10px 6px 12px; width: auto; border-radius: 2px; display: table; margin: 0 auto; text-decoration: none; font-size: 36px; color: #fff;  position: absolute; bottom: 82px; left: 10px; color: #fff; text-shadow: 0px 1px #ccc;}
.img-holder .link:hover { background-color: #EBCAA8; text-decoration: none; color: #7E5223;}
.footnote {color: #ffffff; font-size:18px; line-height: 25px; text-shadow: 0px 1px #94D2FD;}
.about {color: #7C4307; font-size:18px; line-height: 25px; text-shadow: 0px 1px #000000;}
.note {color: #fff;font-size:14px;}
.publication { color: #000; 	font-size: 24px; text-shadow: 0px 1px #000000;}
/* form-fields */
input, select, textarea{background-color: #fff;}
textarea:focus, input:focus {color: black;}

img {
    max-width: 100%;
    height: auto;
}
img.about { max-width: 100%; min-width: 130px; padding: 1px; border: 1px solid #B3916E; margin: 0;}


#outer { width: 100%; text-align: center;}
#inner { width: 1064px; display: inline-block; text-align: center; padding: 24px 0;}

#nav-inner { width: 999px; display: inline-block; text-align: center;}
.content { width: 100%; display: inline-block; text-align: justify; background-color: #FFF7EE; padding: 12px;}

.row { display: flex; /* equal height of the children */ background-color: #FCE0C3;}
.col { flex: 1; /* additionally, equal width */  padding: .2em 2em .2em .2em ;}

#bottom-outer { width: 100%; text-align: center; padding: 18px 0 6px 0;}

@media all and (max-width: 600px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 600px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 600px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 600px), only screen and (min-device-pixel-ratio: 2) and (max-width: 600px), only screen and (min-resolution: 192dpi) and (max-width: 600px), only screen and (min-resolution: 2dppx) and (max-width: 600px) { 
#inner { width: 100%; }
#nav-inner { width: 100%; text-align: left;}
.col { flex: 1; /* additionally, equal width */  padding: .2em;}
.content { width: 98%;  padding: 5px;}

}

@media screen and (min-width: 0px) and (max-width: 700px) {
      #div-mobile {    display: block;  }
      #div-desktop {    display: none;  }
}

@media screen and (min-width: 701px) and (max-width: 3000px) {
      #div-mobile {    display: none;  }
      #div-desktop {    display: block;  }
}