@charset "utf-8";
/* CSS Document */

body {background-image:url(../images/cartoons-bg.jpg); background-repeat:repeat-x; background-color:#73c958; margin:0px; padding:0px; text-align:center;font-family:Arial, Helvetica, sans-serif;
  font-size: calc(14px + (18 - 14) * ((100vw - 300px) / (1600 - 300)));
  line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
}


img {border:none;}

h1 {color:#a24908;  font-size:18px;margin:0px; padding:0px;}
h2 {color:#142399;font-size:16px;margin:0px; padding:0px;}
h3 {color:#142399;font-size:12px;margin:0px; padding:0px;}

.clear {clear:both;}

a {color:#3694fd; text-decoration:none;}
a:hover {color:#000;}
p {text-align:left;}

/*button {width:160px; background-color:#ffc016; border:1px solid #f17f06; color:#fff; font-size:1em;text-decoration:none; height:25px;}*/

button {
    display: inline-block;
    border: none;
    padding: .6rem .8rem;
    margin: 0;
    text-decoration: none;
    background: #ffc016;
    color: #ffffff;
    font-family: sans-serif;
    font-size: 12px;
	font-weight:bold;
    cursor: pointer;
    text-align: center;
    transition: background 250ms ease-in-out, 
                transform 150ms ease;
    -webkit-appearance: none;
    -moz-appearance: none;
	border-radius: 10px;
	width:130px;
	height: 50px;
}

button:hover,
button:focus {
    background: #fdde7e;
}

button:focus {
    outline: 1px solid #fff;
    outline-offset: -4px;
}

button:active {
    transform: scale(0.99);
}

#page {}

#centercol {
	width:100%; 
	background-color: #fff;    
	text-align: center;
    max-width: 708px;
    margin: 0 auto;
}

#header {width:100%;}
#header img 
{
max-width: 100%;
  height: auto;
}

#buttonbar {width:100%; margin-top: 10px;}
/*
#buttonbarbutton a { display:inline-block; width:160px; float:left; text-align:center; background-color:#ffc016; border:1px solid #f17f06; color:#fff;font-size:1em;text-decoration:none;}
#buttonbarbutton a:hover { display:inline-block; background-color:#fdde7e; text-decoration:none;}
*/
#logo {width:393px;}

#blurb {background-color:#FFF; padding:8px;}

#blurb p {font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#592906;}

#blurb .dropcap{float:left; padding-right:20px;}



#button{width:400px;position:relative; top:24px;text-align:center;font-weight: bold; background-color:#D7F1F3; color:white; margin:10px;padding:10px;}

#maincenter {
	width: 100%;
	/*margin: 20px 0px 0px 10px;*/
	background-color: #fff;
	padding: 0px;
}

#mainimage img {
  max-width: 100%;
  height: auto;
  padding-top:20px;
}

#details {
	padding: 0px 40px;
    text-align: left;
    max-width: 649px;
}

#engagements { 
	max-width: 668px;
    min-width: 360px;
    padding: 10px;
    text-align: center;
    margin: 0px auto;
}
#engagements div { 
	width: 70px;
    float: right;
    text-align: center;
    padding: 0px 10px;
}
#engagements div a { 
	font-size:.7em;
}

#menu { 
	max-width: 560px;
	margin:0px auto;
}

#cartoon {
	text-align:center;
	float:left;
	width:120px;
	margin-top:20px;
	padding:0 10px;
}

/*Language Menu*/
#LanguageMenu{
	width: 668px;
    margin: 0 auto;
}
#language{
	float:left;    
	padding-right: 10px;
    font-size: .7em;
}


#cartoonfriend {}

#BioPic {position:relative; top:20px;z-index:1;}
#EmailAddress {position:relative; z-index:2; left:20px;}


#contactinfo{text-align:center;clear:both;font-size:.8em;}

#footer {width:100%; background-color:#73c958; background-image:url(../new/images/grass-texture.gif); background-repeat:repeat-x; height:107px; text-align:center; padding-top:10px;}
#footer a {color:#000;font-weight:bold;}
#collection{margin:10px 0px;}
#collection p {font-weight:bold;text-align: left; color: #3694fd;}

/*font awesome for social media*/
.fa {
  padding: 20px;
  font-size: 30px;
  width: 30px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
}
/* Add a hover effect if you want */
.fa:hover {
  opacity: 0.7;
}