/*
	Theme Name: Run Ombrage
	Theme URI: runombrage.fr
	Description: Créatrice de projets d’ombrage sur l’ile de la Réunion et l’océan Indien, la société Run Ombrage vous propose des solutions esthétiques, modernes, innovantes et résistantes qui habilleront votre extérieur tout en vous protégeant du soleil et des intempéries…
	Version: 5.2x
	Author: Novel Design
	Author URI: https://noveldesign.co.za
	License: Run Ombrage
	License URI: https://www.runombrage.fr 
	Tags: C’est l’Art de l’Ombre, 
*/

/*------------------------------------*\
   ONLINE FONTS
\*------------------------------------*/

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700');

/*------------------------------------*\
    MAIN
\*------------------------------------*/

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { font-size: 100%; padding: 0; margin: 0 !important; }
body {font-family: 'Roboto', sans-serif; color: #333; font-size:16px;}

/* Backround Image : background-color:#ffffff; background-image:url(../img/backing.jpg); 
background-size: cover; background-repeat:no-repeat; background-attachment:fixed; */

.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }

a {color: #333;text-decoration: none;}
a:hover {color: #000; text-decoration: none;}

::-moz-selection { background: #cccccc; color:#ffffff; padding:5px; }
::selection { background: #cccccc; color:#ffffff;padding:5px; }

/*------------------------------------*\
    STRUCTURE
\*------------------------------------*/

.banner-top {}
.banner-top section > div {width: 90%; max-width: 1140px; margin:0 auto; padding: 10px 0px 10px 0px; text-align:left; overflow:hidden; text-align:center;  }

.header { background-color:#ffffff;}
.header section > div {width: 90%; max-width: 1140px; margin:0 auto; padding: 10px 0px 10px 0px; text-align:right;  }

.navigation { background:rgba(0, 0, 0, 1); position: absolute; z-index:99; width:100%;  }

.navigation.sticky { -moz-transition: 0.5s; -o-transition: 0.5s;-webkit-transition: 0.5s; transition: 0.5s; background:rgba(0, 0, 0, 1) !important;}

.logo { display:block; padding:12px; float:left; margin-right:15px; animation: bounce 1s; width: 260px; transition: all 0.4s ease-in-out 0s;}
.logo img { max-width:100%; height:auto;}

.navigation.sticky .logo {
    width: 156px; height:auto;
    transition: all 0.4s ease-in-out 0s !important;
	padding: 12px;
}

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

.sliders {border-bottom: 0px solid #efefef; padding-top: 60px; }
.sliders section > div {width: 100%; margin:0 auto; overflow:hidden; }

.pagetop {padding-top:0px !important; }
.pagetop section > div {width: 100%;position:relative; margin-bottom:5px; height:420px; overflow:hidden; }


#mainfeature {border:1px #ccc solid;}


.former {position:relative; z-index:999;}
.form1 {position:absolute; margin-top: 20px; right:0;}

.sub { width:300px; padding:10px; background-image:url(img/form.png); background-repeat:repeat; border-radius:6px; border:1px #ddd solid; display:block;}

#logo { display:block; float:left; margin-top:15px; margin-bottom: 15px; }

.breadcrumb {width:100%; padding:12px; background:#efefef; margin-top:10px; margin-bottom:10px; border-radius:3px; border:1px rgba(215, 25, 32, 0.05) solid;}
.copyright { text-align:center; }

.img-responsive { max-width: 100%;  height: auto;}

/*------------------------------------*\
    FP PROMO BLOCKS
\*------------------------------------*/

#prompt h1 {font-family: 'Roboto', sans-serif; color:#fff !important; padding-top:155px; font-size:40px;  text-transform: uppercase; text-transform: uppercase; font-weight: 300; text-align: center;}

#promo1 { height:375px; background-size:cover; border-left:10px #fff solid; border-right:0px #fff solid; }
#promo1:hover {}


/* Was 500px */

#promo2 img {text-align:center !important; margin: 0 auto; padding-top: 60px;}

#promo2 { height:375px;background:rgba(0, 0, 0, 1);/* background-image:url(/wp-content/uploads/square2-opt1.jpg); background-size:cover;*/ border-right:10px #fff solid;  border-left:10px #fff solid;  }
#promo2:hover {background:rgba(0, 0, 0, 1); -moz-transition: .4s;-o-transition: .4s;-webkit-transition: .4s;transition: .4s;}

#promo3 { height:375px; background-image:url(/wp-content/uploads/square3.jpg); background-size:cover; border-left:10px #fff solid; border-top:10px #fff solid; border-bottom:10px #fff solid;}
#promo3:hover {background:rgba(0, 0,0, 1); -moz-transition: .4s;-o-transition: .4s;-webkit-transition: .4s;transition: .4s;}


#promo4 { height:375px;background-image:url(/wp-content/uploads/square5.jpg); background-size:cover; border:10px #fff solid;  }
#promo4:hover {background:rgba(0, 0, 0, 1); -moz-transition: .4s;-o-transition: .4s;-webkit-transition: .4s;transition: .4s;}


#promo5 { height:375px;background-image:url(/wp-content/uploads/quefaisonsnous.jpg); background-size:cover; border:10px #fff solid;  }
#promo5:hover {background:rgba(0, 0, 0, 1); -moz-transition: .4s;-o-transition: .4s;-webkit-transition: .4s;transition: .4s;}


.redtxt { padding:5px; background: rgba(0, 0, 0, 1);}

@media screen and (max-width: 992px) {

#promo1, #promo2, #promo3, #promo4, #promo5 { border: none !important;}
	
}

#hover-content { display:none;}
#promo2:hover #hover-content { display:block;}
#promo3:hover #hover-content { display:block;}
#promo4:hover #hover-content { display:block;}
#promo5:hover #hover-content { display:block;}


/*------------------------------------*\
    PROJECTS
\*------------------------------------*/


#projets h1 {font-family: 'Roboto', sans-serif; color:#fff !important; padding-top:110px; font-size:40px;  text-transform: uppercase; text-transform: uppercase; font-weight: 300; text-align: center;}

#stores { height:285px; background-image:url(/wp-content/uploads/stores.jpg); background-size:cover; border: 2px #fff solid; }
#stores:hover {background:rgba(237, 27, 36, 1); -moz-transition: .4s;-o-transition: .4s;-webkit-transition: .4s;transition: .4s;}

#violes { height:285px; background-image:url(/wp-content/uploads/violes.jpg); background-size:cover;border: 2px #fff solid; }
#violes:hover {background:rgba(237, 27, 36, 1); -moz-transition: .4s;-o-transition: .4s;-webkit-transition: .4s;transition: .4s;}

#pergolas2 {height:285px; background-image:url(/wp-content/uploads/pergolas-1.jpg); background-size:cover;border: 2px #fff solid; }
#pergolas2:hover {background:rgba(237, 27, 36, 1); -moz-transition: .4s;-o-transition: .4s;-webkit-transition: .4s;transition: .4s;}

#stores:hover #hover-content { display:block;}
#violes:hover #hover-content { display:block;}
#pergolas2:hover #hover-content { display:block;}

/*------------------------------------*\
    GALLERY
\*------------------------------------*/


#gallery-1 .gallery-item { float: left; margin-top: 10px; text-align: center;   width: 31% !important;  margin: 1%; padding:0.5%; border:1px #eee solid; border-radius: 4px;}
#gallery-1 img { border: 1px solid #eeeeee !important;}

.wp-caption .wp-caption-text, .gallery-caption {font-family: 'roboto' !important; text-align:left; font-size:18px !important; color:#222;  margin-top: 10px !important; font-weight: 300;}

#slb_viewer_wrap .slb_theme_slb_default .slb_data_title, #slb_viewer_wrap .slb_theme_slb_default .slb_group_status {font-family: 'roboto' !important; text-align:left; font-size:18px !important;font-weight: 300;}

.wp-caption-text gallery-caption h4 {top:0 !important; display:block; margin-top:0px !important;}

@media screen and (max-width: 800px) {
	
#gallery-1 .gallery-item { margin-top: 10px; width: 100% !important;}	

}

/*------------------------------------*\
    FOOTER
\*------------------------------------*/

.crown {margin:  0 auto; text-align: center; display: block;}

.footer { background-color:#000000; overflow:hidden; padding: 10px; text-align: center; margin: 0 auto;}
.footer p { font-size:15px; color:#ffffff; font-family: 'roboto', sans-serif; font-weight:300;}

.footer ul li { font-size:13px; margin: 0 0 8px; font-weight:300; text-align: left !important; }
.footer ul {margin-left: -40px; }
.footer li { list-style: none; display: block; color: #fff; }

.footer a:link { text-decoration:none; color:#fff;}
.footer a:visited { text-decoration:none; color:#fff;}
.footer a:hover { text-decoration:none; color:#f8e608 ;}
.footer a:active { text-decoration:none; color:#fff;}



.additional { background-color:#333333; overflow:hidden; color:#ffffff; font-size:13px !important;}
.additional  section > div {width: 90%; max-width: 1024px; margin:0 auto; padding: 10px 0px 10px 0px; text-align:left;   }
.additional p { font-size:13px !important; margin-top:0px; font-weight:300;}

.additional h2 {color:#c1af5a; margin: 0.75em 0 0.75em 0; font-family: 'roboto', sans-serif; font-size:18px; text-transform: uppercase; font-weight:300; text-align: left; margin-top:0px; margin-bottom:10px; } 

.additional ul li {margin-left:-40px;}
.additional li { color:#fff; font-family: 'roboto', sans-serif; font-size:13px !important; list-style:none; padding-bottom:5px; padding-top:5px; border-bottom:1px #222 dotted; }

.additional li:last-child{border:none;}

.post-edit-link {display:none;}

.additional table {
    border-collapse: collapse;
    border-spacing: 0;
    border: 0px;
	width:100%;
	font-weight:300 !important; 
	font-family: 'roboto', sans-serif; 
	font-size: 13px !important;
}

/*------------------------------------*\
    MAIN
\*------------------------------------*/


.main { background-color:#ffffff; margin-top:80px;  }

.main p { font-size:16px; margin: 0 0 10px; font-weight:300; text-align:left;}
.main ul li { font-size:16px; margin: 0 0 10px; font-weight:300;}

.main h1 {color: #333 !important; font-family: 'Roboto', sans-serif; font-size:42px;text-transform: uppercase; text-transform: capitalize; font-weight: 300;margin-top: 0;padding-bottom: 15px;padding-top: 25px; text-align:left;
 } 

.main h2 {color:#111; margin: 0.75em 0 0.75em 0; font-family: 'Roboto', sans-serif; font-size:40px; font-weight:300; text-align: left; margin-top:10px; margin-bottom:10px; } 

.main h2 a:link { text-decoration:none; color:inherit; }
.main h2 a:visited { text-decoration:none; color:inherit; }
.main h2 a:hover { text-decoration:none; color:inherit;}
.main h2 a:active { text-decoration:none; color:inherit;}

.main h3 { color:#333; margin: 0.75em 0 0.75em 0; font-family: 'roboto', sans-serif; font-size:32px; letter-spacing:1px; text-transform: capitalize; font-weight:300; margin-top:0px; margin-bottom:15px; text-align:left;} 

.main h4 {color: #222; font-family: 'roboto', sans-serif; font-size:22px;text-transform: uppercase; font-weight:bold; text-align: center; margin-bottom: 2px; margin: 0.25em auto; } 
.main h4::after {content: "";display: block;margin: 0.45em auto;border-bottom: 2px solid #d71920;width: 90px; }

.main h5 {color: #222; margin: 0.75em 0 0.75em 0; font-family: 'roboto', sans-serif; font-size:25px; letter-spacing:1px; text-transform: uppercase; font-weight:300; text-align: center; margin-top:0px; margin-bottom:15px;} 
.main h5::after {content: "";display: block;margin: 0.45em auto;border-bottom: 2px solid #222;width: 90px; }

.widgettitle { display: none;} 

.main img { max-width:100%; height:auto;}
.tag-cloud-link { padding:5px; border-radius:3px; background:#efefef; border:1px #ddd solid; color:#222; margin:3px; font-size:14px !important; line-height: 40px;
white-space: nowrap; }

/*------------------------------------*\
    NOS PRODUITS
\*------------------------------------*/

#voiles{ padding-top:20px; padding-bottom:20px; background:#ffffff;}

#pergolas { padding-top:20px; padding-bottom:20px; background:#f2f1f0;}
#pergolas h3 {color:#222 !important;}
#pergolas p {color:#222 !important;}

#orient { padding-top:20px; padding-bottom:20px; background:#ffffff;}

#verticaux { padding-top:20px; padding-bottom:20px; background:#f2f1f0;}
#verticaux h3 {color:#222 !important;}
#verticaux p {color:#222 !important;}

#carport { padding-top:20px; padding-bottom:20px; background:#ffffff;}



/*------------------------------------*\
   L'atelier
\*------------------------------------*/

#creation { padding-top:20px; padding-bottom:20px;}
#reparation { padding-top:20px; padding-bottom:20px;}
#fabrication { padding-top:20px; padding-bottom:20px;}



/*------------------------------------*\
    PAGES
\*------------------------------------*/

.page1 {background-color:#dde8e7; overflow:hidden; text-align:center;}
.page1 section > div {width: 90%; max-width: 1140px; margin:0 auto; padding: 30px 10px 30px 10px; vertical-align:text-top; }

.page1 p {font-weight: 300; font-size: 14px; bottom: 0; color: #222; text-align:center;}

.page1 h1 {color: #222; font-family: 'roboto', sans-serif; font-size:38px;text-transform: uppercase; font-weight:500; text-align: center; margin-bottom: 2px; margin: 0.25em auto; } 
.page1 h1::after {content: "";display: block;margin: 0.45em auto;border-bottom: 2px solid #d71920;width: 90px; }

.page1 h2 {font-family: 'roboto', sans-serif; text-transform: uppercase; font-weight: 300; color: #57c4ba; font-size: 26px; margin-bottom: 0.75em;}

.pagebutton { background:#f8e608 !important; width:auto;  color: #000 !important; }
.pagebutton:hover {animation: bounce 1s; -webkit-transition: -webkit-transition: background-color 0.5s ease-out; -moz-transition: background-color 0.5s ease-out; -o-transition: background-color 0.5s ease-out; transition: background-color 0.5s ease-out;}

@keyframes bounce {0%, 20%, 60%, 100% {	-webkit-transform: translateY(0); transform: translateY(0);	}40% { -webkit-transform: translateY(-20px); transform: translateY(-20px);}
80% {-webkit-transform: translateY(-10px);	transform: translateY(-10px);	}}

.page1 a:link {  text-transform: uppercase; text-decoration:none; color:#d71920;}
.page1 a:visited { text-decoration:none; color:#d71920;}
.page1 a:hover { text-decoration:none; color:#d71920;}
.page1 a:active { text-decoration:none; color:inherit;}

/*------------------------------------*\
    PROMO
\*------------------------------------*/

.promo { overflow:hidden !important;  background-color:#111111; border:0px #ccc solid;text-align:center; height: 280px; padding-top: 55px; padding-bottom: 20px; }

.promo h1 {color: #fffff; font-family: 'roboto', sans-serif; font-size:38px;text-transform: uppercase; font-weight:300; text-align: center; margin-bottom: 2px; margin: 0.25em auto; } 
.promo h1::after {content: "";display: block;margin: 0.45em auto;border-bottom: 2px solid #d71920;width: 90px; }

.promo h4 {color: #222; font-family: 'roboto', sans-serif; font-size:22px;text-transform: uppercase; font-weight:bold; text-align: center; margin-bottom: 2px; margin: 0.25em auto; } 
.promo h4::after {content: "";display: block;margin: 0.45em auto;border-bottom: 2px solid #d71920;width: 90px; }

.promo p {font-weight: 300; font-size: 18px; bottom: 0; color: #fff;}
.promo img {max-width:100%; height:auto;}



#feat { padding-left:15px; }
.featst {background-color: #128078; color: #fff;text-transform: uppercase;font-weight: 300;padding: 0.55em;border-radius: 5px;margin: 10px 0;font-family: 'roboto', sans-serif;font-size: 11px;}

.event-list {margin-top: 0;display: inline-block;  padding: 0 0 10px 0; margin-bottom: 15px; border-bottom: 2px solid rgba(215, 25, 32, 0.5); font-size: 24px !important;
margin-bottom: 1.25em; padding: 0;font-weight: 700 !important;text-transform: uppercase; color: #777 !important;}

.eventimg {border:1px #ccc solid;}

.badge {background-color: #128078;color: #fff;text-transform: uppercase;font-weight: 300;padding: 0.55em;border-radius: 5px;margin: 10px 0;font-family: 'roboto', sans-serif;font-size: 11px;}

/*------------------------------------*\
    ABOUT SECTION
\*------------------------------------*/

.roundimg {border-radius: 50%; float:right;}

.about { background-color:#ffffff; overflow:hidden; text-align:center;}
.about section > div {width: 100%; margin:0 auto; padding: 30px 10px 30px 10px; vertical-align:text-top; border-top:5px #792e4d solid; }

.about p {font-weight: 300; font-size: 15px; bottom: 0; color: #333; width: 100%; padding-bottom:40px;}
.about h1 {color: #222; font-family: 'roboto', sans-serif; font-size:38px;text-transform: uppercase; font-weight:300; text-align: center; margin-bottom: 2px; margin: 0.25em auto; } 
.about h1::after {content: "";display: block;margin: 0.45em auto;border-bottom: 2px solid #d71920;width: 90px; }

.shadow {box-shadow: 0 4px 12px rgba(0,0,0,.2); width:500px !important;}
.logoabout { float:left; max-width:145px; width:145px;}
.about img {max-width:100%; height:auto; padding-left:20px;}

#clement {margin-top: 35px;}

/*------------------------------------*\
    FOOTER EXTRA
\*------------------------------------*/


.blocka { background-color:#dde8e7; overflow:hidden; text-align:center;}
.blocka section > div {width: 90%; max-width: 1140px; margin:0 auto; padding: 30px 10px 30px 10px; vertical-align:text-top; }

.blocka:empty {
   display: none;
}

.blocka p {font-weight: 300; font-size: 15px; bottom: 0; color: #333; width: 100%; padding-bottom:40px;}
.blocka h1 {color: #222; font-family: 'roboto', sans-serif; font-size:38px;text-transform: uppercase; font-weight:300; text-align: center; margin-bottom: 2px; margin: 0.25em auto; } 
.blocka h1::after {content: "";display: block;margin: 0.45em auto;border-bottom: 2px solid #d71920;width: 90px; }

#blocka3 {background:#ffffff; box-shadow: 0 4px 12px rgba(0,0,0,.2); padding-bottom: 2.25em; min-height:380px; padding:10px;}
#blockb3 {background:#ffffff; box-shadow: 0 4px 12px rgba(0,0,0,.2); padding-bottom: 2.25em; min-height:380px;padding:10px;}
#blockc3 {background:#ffffff; box-shadow: 0 4px 12px rgba(0,0,0,.2); padding-bottom: 2.25em; min-height:380px;padding:10px;}

.blocka img {max-width:100%; height:auto; margin:0 auto !important; text-align:center;  height: 120px; width: auto; padding-top: 2.25em;}

.blocka h4 {color: #222; font-family: 'roboto', sans-serif; font-size:16px;text-transform: uppercase; font-weight:300; text-align: center; margin-bottom: 2px;padding-top: 1.25em; margin: 0.25em auto; } 
.blocka h4::after {content: "";display: block;margin: 0.45em auto;border-bottom: 2px solid #d71920;width: 90px; }


/*------------------------------------*\
    IG
\*------------------------------------*/

.instagram { overflow:hidden; background:#f1f1f1; border-bottom:#e8e8e 3px solid;}
.instagram section > div {width: 90%; max-width: 1140px; margin:0 auto;  vertical-align:text-top; }

.instagram h2 {font-weight: 500;font-size: 25px;padding-top: 3px; font-family: 'roboto', sans-serif; padding-bottom: 15px;margin: 0;color: #c64957;text-transform: uppercase;background-repeat: no-repeat;background-position: top left;}


.instagram h1 {color: #222; font-family: 'roboto', sans-serif; font-size:38px;text-transform: uppercase; font-weight:300; text-align: center; margin-bottom: 2px; margin: 0.25em auto; } 
.instagram h1::after {content: "";display: block;margin: 0.45em auto;border-bottom: 2px solid #d71920;width: 90px; }

.instagram  p { text-align:left; color: #222; font-weight: 300; font-size:18px !important;}

.instagram a:link { text-decoration:none; color:#d71920;}
.instagram a:visited { text-decoration:none; color:#d71920;}
.instagram a:hover { text-decoration:none; color:#d71920;}
.instagram a:active { text-decoration:none; color:inherit;}

.fb-page, 
.fb-page span, 
.fb-page span iframe[style] { 
    width: 100% !important; 
}

.widgettitle {color: #333; font-family: 'roboto', sans-serif; font-size:18px; letter-spacing:2px; text-transform: uppercase; font-weight:100; text-align: left; margin-top:10px; margin-bottom:10px; }

/*------------------------------------*\
    TABLES
\*------------------------------------*/

table {
    border-collapse: collapse;
    border-spacing: 0;
    border: 0px;
	width:100%;
	font-weight:300; !important; font-family: 'roboto', sans-serif; font-size: 18px;
}

table ul li { margin-left:-20px;}

td,th {
    border: 0px;
    padding: 18px 18px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}


.tdhead {background-color: #128078; color:#fff;}

tbody tr:nth-child(even) td { background:#fcfcfc;}
tbody tr:nth-child(1) td {}

@media screen and (max-width: 640px) {
	table {
		overflow-x: auto;
		
	}
}


/*------------------------------------*\
    SECTIONS
\*------------------------------------*/

.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

#colsection {margin-bottom:-20px; margin-top:-20px; overflow:hidden;}
#colsection .col {margin:0%;}

#colsection .span_1_of_2 {
	width: 50%;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}

.col:first-child { margin-left: 0; }

.colfeat {display: block; float:left; margin:0px;}
.colstore {display: block; float:left; margin:0% 0 0% 1.6%;}

.colcomp {display: block; float:left; margin:0px;}
.colevent {display: block; float:left; margin:0% 0 0% 1.6%;}


/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }


/*  GRID OF TWO  */
.span_2_of_2 {
	width: 100%;
}
.span_1_of_2 {
	width: 49.2%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	
	button { width:80% !important;}

}


/*  GRID OF THREE  */
.span_3_of_3 { width: 100%; }
.span_2_of_3 { width: 66.13%; }
.span_1_of_3 { width: 32.26%; }

#featxt { padding-right:10px; }


@media only screen and (max-width: 800px) {

	
	.mobile-caption {margin-top:0px !important; transition: 0.3s !important;}
	.swiper-slide {height:550px !important; transition: 0.3s !important;}
	#feat { padding-left:0px; border:none; }
	
	#logo {max-width: 120px !important;}
	#featxt { padding:10px; }
	#colsection .span_1_of_2 {width: 100%;}
	#colsection {margin-bottom:0; margin-top:0; overflow:auto;}
	
	.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
	.span_2_of_2, .span_1_of_2 { width: 100%; }
		
}


/*  GRID OF FOUR  */
.span_4_of_4 {
	width: 100%;
}
.span_3_of_4 {
	width: 74.6%;
}
.span_2_of_4 {
	width: 49.2%;
}
.span_1_of_4 {
	width: 23.8%;
}

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 800px) {

	.span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { width: 100%; }
}


/*------------------------------------*\
    MEDIA QUERIES
\*------------------------------------*/

@media screen and (max-width: 55em) {

.main {border:none;}
.hometop { float:none !important; text-align:center !important;}

.former {position:none;}
.form1 {position:inherit; margin-top: 20px; margin: 0 auto !important;}
.sub { width: 100% !important;}

}

@media screen and (max-width: 800px) {


.pagetop {background-repeat:no-repeat !important; background-size: cover;transition: none;}
.pagetop:hover { background-size: cover !important; transition: none !important;}
.pagetitle {margin:0px !important; padding:10px; z-index:0; position: inherit;}

#feat { min-height:auto;}
#eventa { background-size:cover !important; margin:0px; border-bottom:5px #fff solid !important; height:auto; } 
#competa { background-size:cover !important;  border:none !important; margin:0px;}

.pagebutton { background:#f8e608 !important;}

#aboutright {display:none;}
#shopright {display:none;}

}

label.screen-reader-text {display:none; }
label.screen-reader-text {display:none; }

.add-info {border:#ccc 1px solid;}

.add-info h3 {background-color: #128078; font-size:16px; font-weight:300; color: #fff;font-family: 'roboto', sans-serif;text-transform: uppercase;border-radius: 0; margin:0px !important; margin-bottom:2px; padding: 15px;}
.add-info ul {list-style:none; display:list-item; margin-left:-40px; margin-top: 0px; margin-bottom: 0px; }
.add-info li { line-height:22px; padding: 10px;  margin:0px !important; background:#fafafa; border-bottom:#ccc 1px solid;}

.add-info li:last-child{border:none;}


/*------------------------------------*\
    DIGITAL ELEMENTS
\*------------------------------------*/

#bg-video {
  left: 50%;
  min-height: 100%;
  min-width: 100%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.vidtext {
  z-index: 1;
  position: absolute;
}

/*------------------------------------*\
	BUTTONS & FORMS
\*------------------------------------*/

button
{ padding: 11px; margin-bottom: 5px; margin-top:5px; text-align:center; display:inline-block; white-space:nowrap; background-color:#000; border-radius:3px; font-weight:300;font-family: 'Roboto', sans-serif; font-size: 14px; color:#fff !important; border:none; text-transform: uppercase; letter-spacing:1px; cursor:pointer !important;  }


input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
input[type="input"]:hover

{ padding: 12px 35px 12px 35px; text-align:center; display:inline-block; white-space:nowrap; background-color:rgba(255, 255, 255, 0.4);  border:3px #fff solid; font-weight:normal;font-family: 'roboto', sans-serif; font-size:14px !important; color:#fff !important; text-transform: uppercase; letter-spacing:1px; cursor:pointer !important; }


.blk {background-color:#222; border-radius:0px;}

.view-article { background:black; color:#ffffff; padding:10px; border-radius:3px; display: block; max-width: 120px; border:0px; margin: 5px 5px 5px 0px; white-space: nowrap; text-align: center;}
.view-article:hover { background:#e1e1e1; text-decoration: none;}


.page-numbers {padding:5px; border-radius:3px; background:#efefef; color:#333 !important; margin:2px; line-height:37px; border:1px #ccc solid;}


.topbut { margin:5px !important;}
.rsvpBorderTop { padding:12px;}
.rsvpBorderTop {border:1px #e8e8e8 dotted;}
.rsvpFormField {margin: 25px 0px;}


input[type=checkbox],
input[type=radio   ]{
  width   : 28px;
  margin  : 0;
  padding : 0;
  opacity : 0;
}

input[type=checkbox] + label,
input[type=radio   ] + label{
  display      : inline-block;
  margin-left  : 0px;
  padding-left : 28px;
  background   : url('checks.png') no-repeat 0 0;
  line-height  : 24px;
}

input[type=checkbox]:checked + label{
  background-position : 0 -24px;
}

input[type=radio]:checked + label{
  background-position : 0 -48px;
}


iframe, video {
  max-width: 100% ;
 
}

.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
    width: 100% !important;
}

.loca { color: #fff !important; font-size:21px; padding-bottom:25px; padding-top:25px;}
.loca ul {list-style:none; text-align:center; margin-left:-40px; }
.loca li {display:inline-block !important; margin:5px !important; padding-top:20px; background-color:#a7a9ac ; border-radius:12% ;width: 65px; height: 65px;}
.loca li:hover { background-color:#222 !important;}

.loca a:active { text-decoration:none; color:#fff;}.loca a:visited { text-decoration:none; color:#fff;}.loca a:link { text-decoration:none; color:#fff;}.loca a:visited { text-decoration:none; color:#fff;}

.search-input {width:65%; padding:20px;}
.search-submit {padding:19px; border-radius: 3px; background-color: #d71920; margin-left: 5px;}
.search-submit:hover {background:#333333;}

.sitesearch search-input {width:100% !important; padding:12px !important; color:#333; }

input { width:100%; padding:10px; border:#ccc 1px solid; margin-bottom:3px; margin-top:3px; font-size:12px !important; border-radius:3px; -webkit-border-radius:3px; margin-bottom:10px; }

textarea { width:100%; padding:6px; margin-bottom:10px; border:#ccc 1px solid;  margin-top:3px;font-family: 'roboto', sans-serif; font-size:12px !important; border-radius:3px; -webkit-border-radius:3px;}

select { width:100%; padding:9px; border:#ccc 1px solid; margin-bottom:3px; margin-top:3px; font-size:12px !important; color: #999; cursor: pointer; background: #fff url(img/drop-down-arrow.png) no-repeat right center; background-size: 40px 37px; -webkit-appearance: none; -moz-appearance: none;border-radius:3px; -webkit-border-radius:3px; }

label { width:100%; color:#333; font-size:16px; letter-spacing:1px;font-family: 'roboto', sans-serif; font-weight:400; }


.rsvpParagraph {font-family: 'roboto', sans-serif; font-size:16px !important; margin-bottom:5px;}
#addRsvp {margin-top:-60px; cursor:pointer;}

/*------------------------------------*\
    SOCIAL MEDIA LINKS
\*------------------------------------*/

/*------------------------------------*\
    MENU
\*------------------------------------*/

nav ul { list-style:none !important; display:inline-block; padding-top:15px; float:right;}
nav ul li { list-style:none !important; display:inline-block; color:#fff !important; font-family: 'roboto', sans-serif; font-size:16px; text-transform: uppercase; font-weight:300;  }

nav ul li:last-child{border:none;}

nav ul li a:link { color: #fff; text-decoration:none;}
nav ul li a:active { color: #fff; text-decoration:none;}
nav ul li a:visited { color: #fff; text-decoration:none;}
nav ul li a:hover {color: #ffed00;}

nav ul li ul li { background: #000000; border-right: none !important; font-family: 'roboto'; font-weight:normal !important; display: block; z-index:9999;  text-align:left; }

nav ul li ul li a:link { color: #fff; text-decoration:none;}
nav ul li ul li a:active { color: #fff; text-decoration:none;}
nav ul li ul li a:visited { color: #fff; text-decoration:none;}
nav ul li ul li a:hover {color: #ffed00;}

#menu ul { list-style:none; margin:0; padding:0;}
#menu ul a { display:block; line-height:32px; padding:0px 10px 0 10px; }
#menu ul li { position:relative;  margin:0; padding:0}
#menu ul ul { display:none; position:absolute; top:100%; left:0; padding:10px 0px 0px 0px;}
#menu ul ul li { float:none; width:280px; }
#menu ul ul a { line-height:120%; padding:10px; }
#menu ul li ul li {font-size:14px; font-weight:normal; border-bottom: #ccc 0px dotted;}
#menu ul li ul li:last-child{border:none;}
#menu ul ul ul { top:0; left:100%}
#menu ul li:hover > ul { display:block }

.openmenu { display:none;}
.sidenav { display:none;}

@media screen and (max-width: 1170px) {
	
.mainmenu {display: none;}

.openmenu {display: block; cursor: pointer; float: right; margin-top: 10px; transition: 0.5s; font-size: 25px; color: #ffed00; padding: 10px; border-radius: 4px; background: #222222; opacity: 1; line-height: 0px; }
	

.sidenav {
    display: block;
	height: 100%;
    width: 0;
    position: fixed;
    z-index: 999;
    top: 0;
    right: 0;
    background:rgba(0, 0, 0, 0.9);
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
    text-align: left !important;
}

.sidenav a {
    padding: 12px;
    text-decoration: none;
	font-family: 'Roboto', sans-serif; font-size:16px; font-weight: 300; 
    color: #fff; text-transform:uppercase;
    display: block;
    transition: 0.3s;

}

.sidenav nav ul {margin-left:-40px; list-style:none; float:none; display:list-item !important;}
.sidenav nav li {display:list-item !important;}
.sidenav nav ul li ul li { background: none; display: block;  text-align:left; }

.sidenav #menu ul li {float:none;}
.sidenav #menu ul ul {position: relative;  padding:0px;}

.sidenav a:hover{
    color: #e8e8e8;
}

ul .sub-menu { margin-left:-40px;}

.sidenav #menu ul ul a:link { font-size:12px; color:#ffed00 !important;}
.sidenav #menu ul ul a:hover { font-size:12px; color:#cccccc; margin-left:8px; transition: 0.5s;}
.sidenav #menu ul ul a:visited { font-size:12px; color:#ffed00;}
.sidenav #menu ul ul a:active { font-size:12px; color:#ffed00 !important;}


.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

.sidenav .closebtn:hover {
    color: #e8e8e8;
}

}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

/*------------------------------------*\
    WORDPRESS CORE
\*------------------------------------*/


/*
.alignnone {
	margin:5px 20px 20px 0;
}

*/

.aligncenter,
div.aligncenter {
	display:block;
	margin:5px auto 5px auto;
}
.alignright {
	float:right;
	margin:5px 0 20px 20px;
}
.alignleft {
	float:left;
	margin:5px 20px 20px 0;
}
a img.alignright {
	float:right;
	margin:5px 0 20px 20px;
}
a img.alignnone {
	margin:5px 20px 20px 0;
}
a img.alignleft {
	float:left;
	margin:5px 20px 20px 0;
}
a img.aligncenter {
	display:block;
	margin-left:auto;
	margin-right:auto;
}
.wp-caption {
	background:#FFF;
	border:1px solid #F0F0F0;
	max-width:96%;
	padding:5px 3px 10px;
	text-align:center;
}
.wp-caption.alignnone {
	margin:5px 20px 20px 0;
}
.wp-caption.alignleft {
	margin:5px 20px 20px 0;
}
.wp-caption.alignright {
	margin:5px 0 20px 20px;
}
.wp-caption img {
	border:0 none;
	height:auto;
	margin:0;
	max-width:98.5%;
	padding:0;
	width:auto;
}
.wp-caption .wp-caption-text,
.gallery-caption {
	font-size:11px;
	line-height:17px;
	margin:0;
	padding:0 4px 5px;
}
.sticky {

}
.bypostauthor {

}

.comments { display:none;}

.fancy { line-height: 1;text-align: center; }
.fancy span {  display: inline-block; position: relative; }
.fancy span:before,
.fancy span:after { content: ""; position: absolute;height: 8px;border-bottom: 2px solid #fff;border-top: 2px solid #fff;top: 10px;width: 230px; }
.fancy span:before {right: 100%;margin-right: 15px;}
.fancy span:after { left: 100%;margin-left: 15px;}


/*------------------------------------*\
    CAROUSEL
\*------------------------------------*/

/* carousel fullscreen */

.carousel-fullscreen .carousel-inner .item {
    height: 80vh; 
    min-height: 400px; 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-size: cover;
}


/* carousel fullscreen - vertically centered caption*/

.carousel-fullscreen .carousel-caption {
    top: 50%;  
    bottom: auto;
    -webkit-transform: translate(0, -50%); 
    -ms-transform: translate(0, -50%); 
    transform: translate(0, -50%);
}

/* overlay for better readibility of the caption  */

.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.2;
    transition: all 0.2s ease-out;
}


/* demo typography */


.carousel-caption .super-paragraph a,
.carousel-caption .super-paragraph a:hover
{
    color: #fff;
}

#carousel-example-generic {
    margin: 40px 0;
}

/* carousel fade */
/* original solution by https://codepen.io/Rowno/pen/Afykb */

.carousel-fade .carousel-inner .item {
    -webkit-transition-property: opacity;
    transition-property: opacity;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    opacity: 0;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    left: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-control {
    z-index: 2;
}

/*------------------------------------*\
    SLIDERS
\*------------------------------------*/

.swiper-container {
      width: 100%;
      height: 100%;

    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
	  height:950px;
	  max-height:950px;
	  border-bottom: 8px solid #7a2d4d;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
	  
}

.swiper-slide p {font-family: 'PT Sans', sans-serif; color:#fff; font-size: 15px !important; margin:5px;}

#slider1 { background-image:url(/riverside_mall_upload/slide1.jpg); background-size:cover;  }
#slider2 { background-image:url(/riverside_mall_upload/slide3.jpg); background-size:cover;background-position:0% 60%;}
#slider3 { background-image:url(/riverside_mall_upload/slide2.jpg); background-size:cover;background-position:0% 60%;}


.swiper-button-prev {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E") !important;
}

.swiper-button-next {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E") !important;
}

.whitebtn {text-transform: uppercase; font-weight: 300; border: 2px solid #fff; padding: 11px; text-shadow: none; box-shadow: none;background-color: transparent;color: #fff !important;font-size: 14px;border-radius: 0;-moz-transition: .4s;-o-transition: .4s;-webkit-transition: .4s;transition: .4s;}

.whitebtn:hover { background:#be1333 !important;}

.swiper-inner { width: 90%; max-width: 1140px; margin:0 auto; padding: 10px 0px 10px 0px; text-align: center ; overflow:hidden;    }

.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {   margin: 0 4px;}
.swiper-pagination-clickable .swiper-pagination-bullet {  cursor: pointer;}
.swiper-pagination-bullet-active {opacity: 1;  background: #ffffff !important;}
.swiper-pagination-bullet {width: 12px; height: 12px;   display: inline-block;   border-radius: 100%;  background: #000;   opacity: 0.2;}


.mobile-caption { display:block; background-color: rgba(0, 0, 0, 0.75); color: #fff; text-align: center; padding: 50px 20px 50px 20px; box-shadow: 0 4px 4px rgba(0,0,0,.4); bottom:0 !important; position: bottom-sticky; max-width:1140px; margin-top:600px; }
.mobile-caption h1 { font-size: 42px; margin-bottom: 0; margin-top:0px; font-weight: 400; line-height: 45px; text-transform:uppercase; font-family: 'roboto', sans-serif;}
.mobile-caption h3 {font-size: 23px; font-weight: 400; line-height: 26px; margin-bottom: 5px;}
.mobile-caption p { font-size:18px !important; font-weight: 300;  font-family: 'Roboto', sans-serif;}

/*------------------------------------*\
    MODALS
\*------------------------------------*/

/* The Close Button */
.close {
    color: #222 !important	;
    float: right;
    font-size: 38px;
    font-weight: bold;
	opacity:1 !important;  
	margin-top:-15px;
}

.close:hover,
.close:focus {
    color: rgba(21, 21, 21, 1);
    text-decoration: none;
    cursor: pointer;
}