/* ABooyens custom stylesheet */

/* we need to override the pure-g font as set in pure.css line 537 */
html, .pure-g [class *= "pure-u"] { font-family: "Trebuchet MS", Verdana, sans-serif; font-size:0.96em; color:#666666; line-height:1.3em; }

h1, h2, h3, h4, h5, h6 { color:#333333; }
h1 { margin-left:0px; }
h2 { margin-left:15px; line-height:1.1em; font-variant:small-caps; }
h3 { margin-left:30px; }
h4 { margin-left:45px; }
h5 { margin-left:60px; }
h6 { margin-left:75px; }
li { padding:0.2em 0 0.3em 0; }

#outer { margin:0; }
header {
color:#ffffff;
background-image:url('../images/header-bg.jpg');
background-size:20%;
background-position:right top;
background-repeat:no-repeat;
/*background-size: contain;*/
}
header h1 {
font-size:2.5em;
font-family: "Merienda One", Georgia, 'Times New Roman', serif;
color:#ffffff;
padding:20px 0px 15px 0px;
text-align:center;
margin-top:8px;
line-height: 1.2em;
}

.innerbox { padding:1em; }
.center {display:block; margin:auto; text-align:center;}
.right {text-align:left;}
.strong, strong { font-weight:bold; color: #4444a4; }
.pure-button-primary, a.pure-button-primary { background-color:/*#33a033;*/ #0083c2; }
footer { border-top: 1px solid #888888; text-align:right; padding-right:10px; font-style:italic; font-size: 0.95em; }
footer p {margin:6px auto 6px auto;}
ul, ol { padding-left:4.0em; }

@font-face { font-family: Montserrat-Regular; src: url(Montserrat-Regular.ttf); }
ul.montserrat li { font-family:Montserrat-Regular; font-size:1.2em; }
td { font-family:Montserrat-Regular; font-size:1.0em; }
.table-styled { width:90%; }
.table-styled th, .table-styled td { border: 2px solid #dddddd; padding:5px; }
.map-border { border: 2px solid #dddddd; border-radius:7px; } /* map border */
.bg { background-image:url('../images/bg-large.jpg'); background-repeat:no-repeat; background-size: cover;}
.google-maps { position: relative; padding-bottom: 75%; /* This is the aspect ratio */ height: 0; overflow: hidden; }
.google-maps iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; max-height:450px !important; }

.logo-desktop { width:35%; margin-top:10px; margin-left:30%; }
.logo-laptop { width:50%; margin-top:20px; margin-left:13%; }
.logo-mobile { width:60%; margin-top:20px; margin-left:3%; }

/* .grow is used to create an image grow effect on hover */
.grow {transition: all 0.6s; overflow:hidden;}
.grow:hover {transform: scale(1.07);}
.picture { border: 2px solid #cccccc; padding: 5px; box-shadow: 5px 5px 15px #cccccc; }
hr { width: 80%; }