/*
CTC Separate Stylesheet
Updated: 2019-11-23 06:30:13
Theme Name: Twenty Sixteen Child
Theme URI: https://wordpress.org/themes/twentysixteen/
Template: twentysixteen
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Sixteen is a modernized take on an ever-popular WordPress layout — the horizontal masthead with an optional right sidebar that works perfectly for blogs and websites. It has custom color options with beautiful default color schemes, a harmonious fluid grid using a mobile-first approach, and impeccable polish in every detail. Twenty Sixteen will make your WordPress look beautiful everywhere.
Tags: one-column,two-columns,right-sidebar,accessibility-ready,custom-background,custom-colors,custom-header,custom-menu,editor-style,featured-images,flexible-header,microformats,post-formats,rtl-language-support,sticky-post,threaded-comments,translation-ready,blog
Version: 1.3.1574490613
*/



body, html {
	background-color: #FFF;
    padding: 0px;
    margin: 0px;
    height: 100%;
    width: 100%;
    background-image: url(images/back.jpg); background-size: cover;
    background-repeat: no-repeat;
     background-attachment: fixed;
    background-position: right 75px;
}

:focus {
    outline: none !important;
}


#slider {margin-top: 85px;}


body.page-id-338 #slider {display: none;}


body.parent-pageid-255 #slider {background-size: cover; height: 35vh!important; background-position: center center;}

body.page-id-325 #slider {background-image: url(images/reds-diner-best-breakfast-ramsay-ingelwood-calgary-location.jpg);}

body.page-id-257 #slider {background-image: url(images/reds-diner-best-breakfast-kensington-calgary-location.jpg);}

body.page-id-334 #slider {background-image: url(images/reds-diner-best-breakfast-58th-chinook-calgary-location.jpg);}

body.page-id-331 #slider {background-image: url(images/reds-diner-best-breakfast-4th-beltline-calgary-location.jpg);}



body.error404 #slider {background-image: url(http://reds.margotconnery.com/wp-content/uploads/2020/06/reds-diner-best-breakfast-calgary-menu.jpg); height: 35vh; background-position: center center; background-size: cover;}



body.page-id-338 #pageContent {padding-top: 100px;}





section {width: 100%; float: left; min-height: 100%;}





#top {width: 100%; height: auto!important; background-color: #CCC; float: left;}



#header {
	width: 100%;
    position: fixed;
    top: 0;
    height: 85px;
   background-color: #000!important;
   
 
 	

 z-index: 999;
}


    
#reds {
    margin: auto;
    padding-left: 0px;
    padding-top: 10px;
    padding-bottom: 10px;
}

#reds img {width: 100%; height: auto; max-width: 120px;}

#logo {width: 15%; display:inline-block; vertical-align: middle; text-align: center;}







    .top-menu {width: 100%; text-align: center;
    font-family: 'Oswald', sans-serif;
        font-size: 16px; line-height: 16px; text-transform: uppercase; letter-spacing: 2px; padding-top: 7px; padding-bottom: 7px;}

    
    

    
  
    
    .top-menu a {color: #FFF; text-decoration: none; padding-top: 30px; padding-bottom: 30px;}
    
   .top-menu a:hover {color: #cf2535!important; text-decoration: none;}







.top-menu ul {
    
    margin: 0px; padding: 0px; list-style-type: none; display: inline; width: 35%; vertical-align: middle;


}
.top-menu ul li {

  display: inline-block;

  position: relative;

padding-left: 40px; padding-right: 40px; 
 

  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}


.top-menu ul li:hover {

  color: #fff;
}
.top-menu ul li ul {
  padding: 0;
  font-size: 14px;
  position: absolute;
  top: 49px;
  left: 0px;
  
  width: 160px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
.top-menu ul li ul li { 
  background: #cf252b; 
  display: block; 
  color: #fff;
     padding-left: 5px!important; padding-right: 5px; padding-top: 10px; padding-bottom: 10px;
 height: auto!important;
    text-align: center;
    border-top: solid 1px #000;
    font-size: 16px;
   
}


.top-menu ul li ul li a {color: #FFF!Important; padding-top: 0px; padding-bottom: 0px;}

.top-menu ul li ul li a:hover {color: #FFF!Important;}

.top-menu ul li ul li:hover {background-color: #000;}

.top-menu ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}


















#socialLinks {position: fixed; top: 33px; right: 30px; z-index: 9999;}

#socialLinks img {width: 25px; height: 25px; margin-left: 12px;}
 
    
    #welcome {width: 100%; float: left;
   
            display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        text-align: center;
        align-items: center;
       }
    
    #welcomeContent {width: 100%; max-width: 1500px; margin-left: auto; margin-right: auto;
padding-top: 110px;
    color: #000;
    text-align: center;
font-family: 'Roboto Slab', serif; font-size: 19px; color: #000; line-height: 1.8em;
padding-bottom: 20px;}


    
    #titleBox {width: 100%; float: left; text-align: center; margin-bottom: 70px;}

    
    #title {background-color: #cf2434; color: #FFF; text-transform: uppercase; 
    padding-left: 20px;
    padding-right: 20px;
        padding-bottom: 5px; 
        padding-top: 5px; 
        line-height: 1.5em;
    margin-top: 0px;
    margin-bottom: 0px; font-weight: normal;
    font-size: 30px;
    display: inline-block;
   
   min-width: 150px;
     transform: skew(0deg, -18deg);
    text-align: center;
  font-family: 'Oswald', sans-serif;
text-transform: uppercase; letter-spacing: 1.5px;
}


#title h1 {font-family: 'Oswald', sans-serif; font-size: 30px;  
    line-height: 1.5em; letter-spacing: 1.5px; font-weight: 400; margin-top: 0px; padding-bottom: 2px; padding-top: 0px; margin-top: 0px; margin-bottom: 0px;}




#welcomeContent h3 { font-family: 'Oswald', sans-serif;
 font-size: 18px; text-transform: uppercase;  color: #cf252b; font-weight: 400; line-height: 24px; margin-top: 0px; margin-top: 5px; margin-bottom: 12px;}



    

      #welcomeContent h2 {color: #000; text-transform: uppercase; 
    padding-left: 0px;
    padding-right: 0px;
        padding-bottom: 0px; 
        padding-top: 0px; 
        line-height: 24px;

    margin-bottom: 30px;  font-weight: normal;
    font-size: 18px;
    display: inline-block;
   width: 100%;
     transform: skew(0deg, -18deg);
    text-align: center;
  font-family: 'Oswald', sans-serif;
 font-size: 18px; text-transform: uppercase; letter-spacing: 1.5px;}


#welcomeContent h1 {font-family: 'Roboto Slab', serif; font-size: 40px;  
    line-height: 47px; letter-spacing: 1px; font-weight: 400; margin-top: 0px;}


.entry-content {width: 100%; float: left;}
    






#intro a {color: #cf252b; text-decoration: none;}
#intro a:hover {color: #981b1f; text-decoration: none;}




#locationBox {text-align: center;}

#locationBox ul {margin: 0px; padding: 0px; list-style-type: none;}
#locationBox li {list-style-type: none; display: inline-block; margin-left: 15px; margin-right: 15px; margin-bottom: 20px; max-width: 180px; width: 100%;}


a.locationButton {background-color: #000; color: #FFF!important; text-align: center; display: block; width: 100%; padding-top: 7px; padding-bottom: 10px; text-decoration: none;
font-family: 'Oswald', sans-serif;
 font-size: 16px; text-transform: uppercase;
letter-spacing: 1px; font-weight: 200!important;
    line-height: 22px;

    
}

a.locationButton:hover {background-color: #cf252b; color: #FFF!important;}
    
    #locationContent {width: 100%; max-width: 1800px; margin-left: auto; margin-right: auto;padding-top: 20px; padding-bottom: 60px; text-align: center;

       

}
    
#locationInfo {border-top: solid 5px #000; border-bottom: solid 5px #000;
 font-family: 'Roboto Condensed', sans-serif; 
 font-size: 16px; 
letter-spacing: 1px; font-weight: 400!important;
        line-height: 24px;
    margin-bottom: 100px;
   

}

#locationInfo img {margin-right: 10px;}

#locationInfo img.popupaoc-img {width: 40px; height: auto; vertical-align: middle;}

.popupaoc-image-popup {padding-top: 0px;}

#locationInfo a img:hover {opacity: 0.8;}

#locationInfo a {color: #000!important;}
#locationInfo a:hover {color: #999!important;}

#locationInfo h2 {font-family: 'Oswald', sans-serif;
 font-size: 28px; text-transform: uppercase;
letter-spacing: 1px; font-weight: 200!important;
    line-height: 36px;
color: #cf252b;
margin-bottom: 12px;}

.embed-border {border: solid 2px #000!important; float: left!important; height: 375px; width: 99%; margin-bottom: 50px;}

#locationInfo embed, #locationInfo iframe {width: 100%!important; height: 375px!important;}







    


.tourBox {padding-top: 10px; width: 100%; float: left;}

img#tour {width: 25px; height: 25px; vertical-align: middle; margin-left: 10px;}
    








    
    
#dinerMenu{width: 100%;  float: left; background-color: #333; background-image: url(images/blackboard.jpg); background-size: cover; background-attachment: fixed; }



#pageBack{width: 100%;  float: left; background-color: #FFF; background-image: url(images/back.jpg); background-size: cover; background-position: right 75px; background-attachment: fixed; }
    
    #dinerMenuContent, #menuContent {width: 75%; max-width: 1000px; margin: auto; text-align: center; margin-top: 100px; margin-bottom: 60px;}

#pageContent {width: 75%; max-width: 1000px; margin: auto;  margin-top: 50px; padding-bottom: 100px;
font-family: 'Roboto Slab', serif; font-size: 19px; color: #000; line-height: 1.8em; color: #000;  font-weight: 400; 

}

#pageContent h1 {font-family: 'Roboto Slab', serif; font-size: 40px;  
    line-height: 47px; letter-spacing: 1px; font-weight: 400;}


#pageContent a {color: #cf252b; text-decoration: none;}
#pageContent a:hover {color: #981b1f; text-decoration: none;}


#menuList {width: 100%; float: left;}



.menuBox {width: 100%; float: left;font-family: 'Roboto Slab', serif; font-size: 14px;  
    line-height: 1.4em;
        padding-bottom: 0px;
    padding-top: 0px;
        font-weight: 300;
color: #FFF;
letter-spacing: 1px;
border-top: solid 4px #FFF;}

.menuBox p {padding-top: 5px!important; margin-top: 0px!important;}


.toggle-text {
  display: none;
}


#menuLeft {width: 45%; float: left; text-align: left;}

#menuRight {width: 45%; float: right; text-align: left;}




#menuList h2 {width: 100%; float: left; font-family: 'Oswald', sans-serif;
 font-size: 34px; text-transform: uppercase; font-weight: 400;
color: #FFF; line-height: 42px;
text-transform: uppercase;
letter-spacing: 1px; margin-top: 12px; margin-bottom: 12px;}

.menuBox h3 {font-family: 'Roboto Slab', serif; font-size: 18px; color: #FFF; 
    line-height: 24px!important;
margin-top: 12px;
    margin-bottom: 0px;
        font-weight: 400;
letter-spacing: 1.5px;}



strong {font-weight: 700!important;}


.read-more-state {
  display: none;
}

.read-more-target {
  opacity: 0;
  max-height: 0;
  font-size: 0;
  transition: .25s ease;
}

.read-more-state:checked ~ .read-more-wrap .read-more-target {
  opacity: 1;
  font-size: inherit;
  max-height: 999em;
}

.read-more-state ~ .read-more-trigger:before {
  content: 'More';
}

.read-more-state:checked ~ .read-more-trigger:before {
  content: 'Less';
}

.toggle-text-button {
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-family: 'Oswald', sans-serif!important;
 text-transform: uppercase; 
font-weight: 400;
color: #FFF; 
line-height: 1.5em;
letter-spacing: 1.5px;
width: 100%; text-align: center;
  padding-top: 10px;
    margin-top: 10px;
    margin-bottom: 12px;


}

.toggle-text-button:hover {color: #CCC;}

.menu-8 a.toggle-text-button, .menu-7 a.toggle-text-button, .menu-6 a.toggle-text-button {display: none!important;}


#responsive-menu-additional-content img {margin-right: 15px; max-width: 30px; height: auto;}




.aligncenter {margin-left: auto; margin-right: auto;
margin-top: 12px; margin-bottom: 12px!important;}



body.page-id-338 .entry-content li {padding-bottom: 10px;}



body.home .entry-title {display: none;}



#socialMedia {width: 100%; float: left; height: 300px; background-color: #666; background-image: url(images/social.jpg); background-size: cover; background-repeat: no-repeat;}

#redsMenu {width: 100%; float: left; height: 100%; background-color: #999;  padding-top: 90px;}



#flipdish-menu h1 {font-family: 'Oswald', sans-serif!important;
 font-size: 26px!important; font-weight: 400!important;
 line-height: 2em!important;
text-transform: uppercase!important;
letter-spacing: 1px!important;}

#flipdish-menu h2, .MuiTypography-h2 {font-family: 'Oswald', sans-serif!important;
 font-size: 18px!important; font-weight: 400!important;
 line-height: 2em!important;
text-transform: uppercase!important;
letter-spacing: 1px!important;}

#flipdish-menu p {font-family: 'Roboto Slab', serif!important; font-size: 18p!important;
    line-height: 2em!important;

        font-weight: 400!important;
letter-spacing: 1.5px!important;}





.nf-form-fields-required {text-align: left!important; padding-bottom: 7px;}

.paoc-popup-modal{width:90%!important; max-width: 1200px!important; min-height: 500px; max-height: 1200px; }




   #yelp img:hover {opacity: 0.7;}






   
#footer {width: 96%; padding-left: 2%; padding-right: 2%; float: left; background-color: #000; padding-top: 22px; padding-bottom: 16px; }

#footer a {color: #CCC; text-decoration: none;}
#footer a:hover {color: #FFF; text-decoration: none;}



#footerLeft {width: 70%; float: left; font-family: 'Oswald', sans-serif;
        font-size: 14px; letter-spacing: 1px; line-height: 22px; color: #FFF; font-weight: 400;}

#footerRight {width: 25%; float: right; text-align: right; font-family: 'Oswald', sans-serif;
        font-size: 14px; letter-spacing: 1px; line-height: 22px; color: #FFF; font-weight: 400; color: #000;}


body.page-id-146 #dinerMenuContent{
width:100%!important;
max-width:1200px!important;
}
#flipdish-menu .menu__basket{
margin-top:100px!important;
}

#flipdish-menu section {
float: none !important;
}





/**
 * 8.0 - Alignments
 */

.alignleft {
	float: left;
	margin: 0.375em 1.75em 1.75em 0;
}

.alignright {
	float: right;
	margin: 0.375em 0 1.75em 1.75em;
}

.aligncenter {
	clear: both;
	display: block;
	margin: 0 auto 1.75em;
}

blockquote.alignleft {
	margin: 0.3157894737em 1.4736842105em 1.473684211em 0;
}

blockquote.alignright {
	margin: 0.3157894737em 0 1.473684211em 1.4736842105em;
}

blockquote.aligncenter {
	margin-bottom: 1.473684211em;
}







@media screen and (min-width: 1500px) and (max-width: 7000px) {

    
        #welcomeLinks {width: 100%; max-width: 1100px; margin: auto; text-align: center; padding-top: 80px; padding-bottom: 15px;}
    
       #title {background-color: #cf2434; color: #FFF; text-transform: uppercase; 
    padding-left: 20px;
    padding-right: 20px;
        padding-bottom: 5px; 
        padding-top: 5px; 
        line-height: 1.5em;
    margin-top: 0px;
    margin-bottom: 0px; font-weight: normal;
    font-size: 30px!important;
    display: inline-block;
   min-width: 200px!important;
     transform: skew(0deg, -18deg);
    text-align: center;
  font-family: 'Oswald', sans-serif;
 text-transform: uppercase; letter-spacing: 1.5px;
}
    

}
    

    

    
  div#location1 div.n2-section-smartslider{float: left; width: 100%;}
    
    
      #locationContent {width: 100%; max-width: 2400px; margin-left: auto; margin-right: auto;padding-top: 30px;text-align: center;}
    
        #locationContent li {width: 24%; 
        padding-left: 0%; 
            padding-right: 0%;
        display: inline-block; 
        font-family: 'Roboto Condensed', sans-serif; 
        font-size: 16px; 
        line-height: 1.5em;
        list-style-type: none!important;
  
        max-width: 400px;
        text-align: left!important;
        }
    
           #titleLocation {color: #000; text-transform: uppercase; 
    padding-left: 0px;
    padding-right: 0px;
        padding-bottom: 0px; 
        padding-top: 0px; 
        line-height: 1.5em;

    margin-bottom: 30px;  font-weight: normal;
    font-size: 21px;
    display: inline-block;
   width: 100%;
     transform: skew(0deg, -18deg);
    text-align: center;
  font-family: 'Oswald', sans-serif;
 font-size: 18px; text-transform: uppercase; letter-spacing: 1.5px;}
    
        #bookingLeft {width: 45%; float: left; text-align: left;  }
    
    
}











    
    
    
    


@media screen and (min-width: 900px) and (max-width: 1100px) {



    #welcomeContent {width: 70%!important; }
    
    
 

    
}




@media screen and (min-width: 991px) and (max-width: 1250px) {
    
    #welcomeContent {width: 70%!important; }
    
    #header {
	width: 100%;
    position: fixed;
    top: 0;
   
    
      background: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%,rgba(0, 0, 0, 0.0) 100%); /* W3C */
        
   
 
 	
    background-repeat: repeat-x!important;
 z-index: 999;
}
    
    #socialLinks {width: 100%; text-align: center; top: 85px; right: 0px;}
    

#socialLinks img {width: 25px; height: 25px; margin-left: 6px; margin-right: 6px;}
    
    
     .top-menu ul {margin: 0px; padding: 0px; list-style-type: none; display: inline-block; width: 40%; vertical-align: middle;}
    
    
}





@media screen and (min-width: 200px) and (max-width: 1007px) {
    
    body, html {background-image: url(images/back.jpg); background-size: cover;
    background-repeat: repeat-y;
     background-attachment: scroll;
    background-position: center center;}
    
    .top-menu ul, .top-menu li {display: none;}
    
    #socialLinks {display: none;}
    
    #responsive-menu-container {  font-family: 'Oswald', sans-serif;
 font-size: 18px; text-transform: uppercase; letter-spacing: 1.5px;}
    

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

#logo {width: 50%!important; display:inline-block; vertical-align: middle; text-align: center;}




    

            
    
        #welcomeContent {width: 85%;  margin-left: auto; margin-right: auto;
            padding-top: 110px;}

    
        #welcomeLinks {width: 90%;margin: auto; text-align: center; padding-top: 30px; padding-bottom: 15px;}
    
    #welcomeLinks ul {list-style-type: none; margin: 0px; padding: 0px;}
    
    #welcomeLinks li {display: inline-block; width: 45%; padding-left: 2%; padding-right: 2%; text-align: center;}
    
    #welcomeLinks img {width: 90%; max-width: 360px; min-width: auto; height: auto;}
    
      #locationContent li {margin: 0px;
        width: 80%; 
        padding-left: 10%;
        padding-right: 10%;
          padding-bottom: 65px;
        display: inline-block; 
        font-family: 'Roboto Condensed', sans-serif;
        font-size: 14px; 
        line-height: 1.5em;
        list-style-type: none!important;
  
        max-width: auto;
        text-align: left!important;
        }
    

    
    .nf-form-fields-required {text-align: center!important;}
    

    
    #section3 #findus div#titleBox {margin-top: 75px;}
    
    
    section#section4 {   height: auto; 
   
                width: 100%; float: left;}

#pageContent h1 {font-family: 'Roboto Slab', serif; font-size: 30px;  
    line-height: 37px; letter-spacing: 1px; font-weight: 400;}

#locationIntro img, #yelp img {max-width: 300px; height: auto; width: 100%!important;}
    
 
    
    
#bottomSocial {width: 100%; float: left; padding-left: 0%; text-align: center;}
    

    
    #footer {width: 90%; padding-left: 5%; padding-right: 5%;}
    
    #footerLeft {width: 100%; float: left; margin-bottom: 30px; padding-left: 0px; padding-right: 0px; text-align: center;}
    
    #menuBottom {padding-top: 2px;}
    
      #menuBottom li {display: inline-block; width: 100%; float: left; padding-top: 5px; padding-bottom: 5px;}


#footerRight {width: 100%; float: left; text-align: center; padding-top: 2px; padding-right: 5px;}
    
    #footerRight img {max-width: 100px; height: auto; width: 100%;}
    
    #bottomSocial {margin-top: 50px;}
    
    #dinerMenuContent {width: 90%;}
    #menuLeft {width: 100%;}
    #menuRight {width: 100%;}
    
    
}