body {
font: 105%/1.5 'Lato', Helvetica, Arial, sans-serif; 
color:#2d2d2d;
}  .site-main {
background-color:rgba(255, 255, 255, 0.8);
margin-top:8px;
margin-bottom:48px;
padding: 32px 12px 12px 12px !important;
z-index:1;
position:relative; }
@media (min-width: 992px) {
.site-main {
padding: 24px 18px 12px 18px !important;
}
}
.container {
padding:0;
}
.mainCol {
width:80%;
}
#primary {
padding:0 24px;
position:relative;
z-index:1;
}
@media (min-width: 768px) {
#primary {
padding:0 12px;
}
}
#primary .row {
margin-bottom:24px;
} .infoBox {
background:#7f7f7f url(//artofislamicpattern.com/wp-content/themes/petra-child-3/images/box-background.jpg) repeat-x top left;
color:#FFFFFF;
padding:18px 18px 12px 18px;
margin: 0 0px 12px 0px;
}  #headerImage img {
width:100%;
}
.banner {
position:relative;
margin-bottom:0px;
}
.nav-title {
position:absolute;
top:0;
width:100%;
height:420px
}
.header-type-simple .nav-title {
height:240px
}
.header-type-simple .banner {
height:240px
}
.header-type-video .nav-title {
position:relative;
top:0;
height:auto;
}
.header-type-video .nav-title {
height:auto;
}
.header-type-video .banner {
height:auto;
}
h1#logo {
width: 100%;
position:relative;
z-index:1;
}
h2.title {
background-color:rgba(255, 255, 255, 0.8);
padding:16px 24px 12px 24px;
margin:0;
font-size:1.5rem;
display:inline-block;
position:relative;
z-index:1;
}
#carousel{
height:420px;
overflow: hidden;
}
.carousel-item img {
object-fit: cover;
object-position: center;
height: 420px;
overflow: hidden;
} .backgroundImages {
position:absolute;
width:100%;
}
.header-bg-simple {
background:#fff url(//artofislamicpattern.com/wp-content/themes/petra-child-3/images/backgrounds/bg-simple-1-geometry.jpg) no-repeat center top;
background-size: 1000px;
min-height: 600px;
}
.headerImageSimple {
background:#fff url(//artofislamicpattern.com/wp-content/themes/petra-child-3/images/backgrounds/bg-1.jpg) no-repeat center top;
background-size: auto;
background-size: 1200px ;
height: 340px;
} @media (min-width: 576px) {
.header-bg-l {
background:#fff url(//artofislamicpattern.com/wp-content/themes/petra-child-3/images/backgrounds/bg-gallery-1-l.jpg) no-repeat top right;
background-size: 450px ;
height:450px;
}
.header-bg-r {
background:#fff url(//artofislamicpattern.com/wp-content/themes/petra-child-3/images/backgrounds/bg-gallery-1-r.jpg) no-repeat top left;
background-size: 450px ;
height:450px;
}
.header-bg-simple  {
background-size: 1000px;
}	
.spacer-container {
width:540px;
}
} @media (min-width: 768px) { 
.header-bg-simple  {
background-size: 1400px;
}	
.spacer-container {
width:720px; 
}
.banner {
position:relative;
margin-bottom:0px;
}
.nav-title {
position:absolute;
top:0;
width:100%;
height:420px
}
.header-type-simple .nav-title {
height:240px
}
.header-type-simple .banner {
height:240px
}
} @media (min-width: 992px) {
.header-bg-simple  {
background-size: 1400px;
}
.spacer-container {
width:960px;
}
.two-column .entry-content {
margin-right:24px;
}	
} @media (min-width: 1200px) { 
.header-bg-simple  {
background-size: 1700px;
}
.spacer-container {
width:1140px;
}
} @media (min-width: 1400px) { 
.header-bg-simple  {
background-size: 1900px;
}
.spacer-container {
width:1320px;
}
} @media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 
}  #main-navbar {
position:relative;
background: #30697B;
background-color:rgba(48, 105, 123, 0.9);
z-index:10; font-family: 'Cinzel', Helvetica, Arial, sans-serif; 
text-transform:uppercase;
}
#main-navbar a {
color:#EAEAEA;
text-decoration:none;
padding:4px 12px;
}
#main-navbar ul ul {
background: #30697B;
background-color:rgba(48, 105, 123, 0.92);
}
#main-navbar ul ul a {
padding:4px 16px;
}
#main-navbar li a:hover, #main-navbar li.current-page-item>a, #main-navbar li.current-menu-item>a, #main-navbar li.current-page-ancestor>a {
color:#fff;
background-color:#244E5B !important;
}
.navbar {
padding:0;
}
@media (min-width: 768px) {
.sm-nav  {
display:block;
}
.sm-nav li {
display:inline-block;
}
.sm-nav li li {
display:block;
}
.secondaryMenu {
text-transform: capitalize;
font: 105%/1.5 'Lato', Helvetica, Arial, sans-serif; 
font-weight:100;	
}
}
@media (min-width: 1200px) {	
.primaryMenu {
width:68%;
}
.secondaryMenu {
width:32%;
}
} #footer {
font-size:0.8em;
color:#d5d5d5;
background:#575757;
padding-top:24px;
}
#footer a {
color:#d5d5d5;
text-decoration:none;
border:none;
}
#footer a:hover {
color:#fff;
}
#footer ul {
margin:0px 0px 12px 0px;
padding:0px;
}
#footer li {
list-style-type:none;
padding:0px;
margin:0px;
}
#footer h5 {
margin:0;
padding:0 0 0 4px;
}
#footer p {
margin-bottom:0;
}  h1, h2, h3, h4, h5, h6 {
font-weight: 600;
font-family: 'Cinzel', Helvetica, Arial, sans-serif; 
margin: 0px 0px 8px 0px;
}
h1 {
font-size:1.7rem;
}
h2 {
font-size:1.5rem;
}
h3 {
font-size:1.3rem;
}
h4 {
font-size:1.2rem;
}
a {
color:#348EAA;
text-decoration:none; background-image: linear-gradient(to right, #348EAA 40%, rgba(255, 255, 255, 0) 0%);
background-position: bottom;
background-size: 8px 1px;
background-repeat: repeat-x;
}
a:hover {
color:#30697B; background-image: linear-gradient(to right, #348EAA 20%, #348EAA 20%);
background-size: 8px 2px;
}
a:hover, .button.card a:hover,  footer a:hover  {
color:#30697B; background-image: linear-gradient(to right, #348EAA 20%, #348EAA 20%);
background-size: 8px 2px;
}
a.button, .card a, #main-navbar a, .listing a, footer a, #sb_instagram a {
border-bottom: none;
background-image:none;
}  a.button {
background:#61aca5; 
color:#fff;
text-decoration:none;
padding: 4px 8px;
}
a.button.bookingFormButton {
background:#61aca5; 
color:#fff;
text-decoration:none;
padding: 8px 18px;
margin:-18px 0px 12px 0px;
box-sizing:border-box;
width:100%;
display:block;
font-weight:bold;
}
a:hover.button {
cursor:pointer;
}
input[type=text], input[type=email],
textarea
{
font: 1.2em/1.4 'Catamaran', Arial, sans-serif;
background-color: #fff;
color: #666;
width: 100%;
border-radius: 8px;
box-sizing:border-box;
padding:10px 14px 10px 14px;
letter-spacing:1px;
}
input.submit, 
input.wpcf7-submit {
width:auto;
color:#fff;
border:none;
border-radius: 8px;
background: #30697B;
margin-bottom:6px;
font-size:1.2em;
padding:8px 36px 10px 36px;
cursor: pointer;
font-weight:400;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out;
transition: box-shadow .5s;
}
input.submit:hover, input.wpcf7-submit:hover {
cursor: pointer;
box-shadow: 0px 0px 6px 3px #abb;
}
input::placeholder,
textarea::placeholder {
color: #BAE8F3;
font-size: 1.2rem;
}
select {
width:100%;
max-width:100% !important;
}
#bookingForm input.wpcf7-submit, 
#bookingForm input,
#bookingForm textarea{
padding:8px 12px;
width:100%;
box-sizing:border-box;
margin:0px;
background: #61aca5;
color: #fff;
border:none;
}
#bookingForm input.submit:hover, #bookingForm input.wpcf7-submit:hover {
box-shadow: 0px 0px 6px 3px rgba(0,0,0,.4);
}  div.wpcf7 {
margin: 0;
padding: 0 0 24px 0;
}
.screen-reader-response {
display: none;
}
div.wpcf7-response-output {
margin: 4px 0px;
padding: 0px;
font-weight:bold;
}
#bookingForm div.wpcf7-response-output {
color:#fff;
} div.wpcf7-validation-errors {
color:#FF0000;
background: #bcc9dd;
}
span.wpcf7-form-control-wrap {
position: relative;
}
span.wpcf7-not-valid-tip {
position: relative;
z-index: 100;
background: none;
font-weight:bold;
font-size: 10pt;
width: 280px;
padding: 2px 0px 2px 0px;
color:#FFf;
font-size:0.9em;
display:block;
width:100%;
box-sizing:border-box;
}
span.wpcf7-not-valid-tip-no-ajax {
color: #f00;
font-size: 10pt;
display: block;
}
span.wpcf7-list-item {
margin-left: 0.5em;
}
.wpcf7-display-none {
display: none;
}
div.wpcf7 img.ajax-loader {
display:none;
}
div.wpcf7 .watermark {
color: #888;
} #bookingForm  div.wpcf7 input:focus,#bookingForm  div.wpcf7 textarea:focus {
background-color:#2a5451;
box-shadow: 0px 0px 8px 2px #1e3b39;
}
#bookingForm {
display:none;	
background-color: #447873;
position:relative;
top:-12px;
padding:12px 24px 0px 24px;
color:#fff;
}
#bookingForm a {
color:#fff;
}  .listing {
margin-bottom:24px;
min-height:200px;
}
.listingHeader {
background: #30697B url(//artofislamicpattern.com/wp-content/themes/petra-child-3/images/listing-header-bg.png) bottom left repeat-x;
color:#fff;
padding: 12px 24px;
}
.listingDate {
margin:12px 0 12px 0;
font-weight:400;
}
.listingTitle {
margin:12px 0 6px 0;
}
.listingImage {
overflow:hidden;
padding:0;
height:200px;
}
.listingImage img {
object-fit:cover;
height: 100%;
width: 100%;
}
.listingInfo {
padding: 18px 24px 0px 24px;
line-height:1.2;
font-size:0.9em;
background-color: rgba(240,244,244,0.9);
}
.listing h3 {
font-size:1.4em;
color:#fff;
}
.listing a {
text-decoration:none;
color:#fff;
}
.listingInfo  a{
color:#333;
}
.listing a:hover {
color:#fff;
background-image:none;
}
.listingInfo  a:hover{
color:#333;
}
.listing a:hover .readMore {
text-decoration:underline;
}
@media (min-width: 992px) {
.listingImage {
position:relative;
height: auto ;
}
.listingImage img {
position:absolute;
top:0;
}
.listing h3 {
font-size:1.2em;
}
} .calloutBoxes {
margin-bottom:12px;
}
.card {
position:relative;
border:none;
overflow:hidden;
}
.card .title {
position:absolute;
bottom:0;
left:0;
width:100%;
padding:8px 12px;
background-color:rgba(48, 105, 123, 0.8);
font-weight: 600;
}
.card h3{
margin:0;
text-shadow: 0px 0px 4px #2d2d2d;
font-size:1.1rem;
color:#fff;
}
.card a:hover {
color:#fff;
}
.card .description {
position:absolute;
top:0;
left:0;
opacity:0;
height:100%;
width:100%;
padding:12px;
overflow:hidden;
background-color:rgba(255, 255, 255, 0.88);
background-color:rgba(48, 105, 123, 0.8);
font-weight: 400;
font-size: 1.0rem;
transition: 0.3s;
line-height: 1.0;
color:#fff;
}
.card .description  h3{
margin-bottom:4px;
}
@media (min-width: 992px) {
.card .description {
font-size: .9rem;
}
}
@media (min-width: 1200px) {
.card .description {
font-size: 1.0rem;
line-height: 1.1;
}
}
.card:hover .description {
transition: 0.3s;
opacity:1;
}
.card:hover .title  {
transition: 0.5s;
opacity:0;
}
.card .dates {
font-weight:400;
}	
.card img { 
width:100%;
height:100%;
object-fit: cover;
} .royalSlider {
width: 100% !important;
-webkit-user-select: none;
-moz-user-select: none;  
user-select: none;
border:solid 1px #ddd;
background: #eee !important;
clear:both;
}
.royalSlider,
.royalSlider  .rsOverflow,
.royalSlider  .rsSlide,
.royalSlider  .rsVideoFrameHolder,
.royalSlider  .rsThumbs {
background: #eee !important;
}
.royalSlider  .rsThumbs {
background: #ddd !important;
margin-bottom:24px !important;
}
.royalSlider.rsFullscreen,
.royalSlider.rsFullscreen  .rsOverflow,
.royalSlider.rsFullscreen  .rsSlide,
.royalSlider.rsFullscreen  .rsVideoFrameHolder,
.royalSlider.rsFullscreen  .rsThumbs {
border:none;
background: #222 !important;
}
.royalSlider .rsGCaption span {
display: block;
clear: both;
color: #bbb;
font-size: 14px;
line-height: 22px;
}
.royalSlider .rsGCaption {
width: 100% !important;
text-align:center !important;
background: rgba(0,0,0, 0.5) !important;
left:0 !important;
bottom:0 !important;
}
.royalSlider .rsThumbsHor {
width: 100%;
height: 62px !important;
padding: 6px;
}
.royalSlider .rsThumb {
width: 50px !important;
height: 50px !important;
border:none !important;
}
.royalSlider .rsThumb.rsNavSelected span.thumbIco {
border: none !important;
border: none !important;
} 
.royalSlider .rsThumb img {
opacity: 0.6 !important;
filter: alpha(opacity=60) !important;
transition: opacity 0.3s;
}
.royalSlider .rsThumb.rsNavSelected img, .royalSlider .rsThumb:hover img {
opacity: 1.0 !important;
filter: alpha(opacity=100) !important;
}
.royalSlider .rsThumbsArrow {
background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,.2));
}
.royalSlider .rsThumbsArrowLeft { 
background-image: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,.2)); 
}
.royalSlider > .rsImg {
visibility:hidden;
}
.royalSlider img {
}
.rsWebkit3d .rsSlide {
-webkit-transform: none;
}
.rsWebkit3d img {
-webkit-transform: translateZ(0);
}
@media (max-width: 768px) {
img:not(.royalSlider *):not(.notFullWidthMobile *) {
clear:both;
width:100% !important;
margin:0 !important;
padding:0 !important;
}
} figure.size-medium {
width:100%;
}
figure.size-medium img {
width:100%;
}
@media (min-width: 768px) {
figure.size-medium {
width:50%;
}
} .wp-block-image .alignright {
margin-top:0 !important;
} .alignleft { float: left !important; margin-right: 1.5em !important;
margin-bottom: 1.5em !important;
}
.alignright { float: right !important; margin-left: 1.5em !important;
margin-bottom: 1.5em !important;
}
.aligncenter {
clear: both !important;
display: block !important; 
margin-left: auto !important;
margin-right: auto !important;
margin-bottom: 1.5em !important;
}
@media (max-width: 768px) {
.alignleft { float: none !important; margin-right: 0em !important;
margin-bottom: 0em !important;
}
.alignright { float: none !important; margin-left: 0em !important;
margin-bottom: 0em !important;
}
.aligncenter {
clear: both;
display: block; float: none !important; margin-left: 0em !important;
margin-right: 0em !important;
margin-bottom: 0em !important;
} .alignleft.notFullWidthMobile { float: left !important; margin-right: 1.5em !important;
margin-bottom: 1.5em !important;
}
.alignright.notFullWidthMobile { float: right !important; margin-left: 1.5em !important;
margin-bottom: 1.5em !important;
}
.aligncenter.notFullWidthMobile {
clear: both !important;
display: block !important; 
margin-left: auto !important;
margin-right: auto !important;
margin-bottom: 1.5em !important;
}
} .videoWrapper {
position: relative;
padding-bottom: 56.25%; padding-top: 25px;
overflow: hidden; 
max-width: 100%;
height: auto;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.responsive-map{
overflow:hidden;
padding-bottom:100%;
position:relative;
height:0;
margin-top:24px;
clear:both;
}
.responsive-map iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}
.responsive-embed{
margin-top:24px;
overflow:hidden;
padding-bottom:100%;
position:relative;
height:0;
}
.responsive-embed iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
} .grecaptcha-badge { 
visibility: hidden !important;
}
.recaptcha {
font-size:0.9em;
opacity:.8;
}
.courseVideo {
float:right;
}
stripe-buy-button {
position:relative;
top:8px;
}
.clear {
clear:both;
}