/* google font famliy :  font-family: 'Lato', sans-serif;  */

/*============= RESETS =============*/

/*-- iPhone X Remove Gutters --*/

html {
   padding: env(safe-area-inset); /* ensures that the iPhone display is totally used */
}  
                                 /* this works even for non-rectangular displays */
/*-- Prevent Horizontal Scrolling & Font Style --*/
html, body {
    /* overflow: hidden; */ /* prevent horizontal scrolling, also prevent vertiacal scrollings */ 
    font-family: 'Lato', 'sans-serif','english_towneregular', 'Yatra One','belly_bettyregular','blackchanceryregular'; /* remove 'english_towneregular' if it causes problems */
    color: #505962; /* text color for the entire website, unless overriddent somewhere */
}
.text-nuno {  /* to target class with this color */
    color: #1ebba3; 
}

/*--- Nav Scrolling Offset --*/

.offset:before { /* this causes the referenced portion land just below the navigation, instaed of under it*/
    content: '' ;
    height: 4rem; /*  4rem (or you can adjust this) is the height of the navigation */
    display: block;
    margin-top: -4rem; /* to adjust the position of the referenced portion */
}

/*--- Extra Bootstrap Column Padding --*/
[class*="col-"] {  /* this references all occurences of "class" where it contains the substring "col-"*/
    padding: 1rem; 
}

/*============= NAVIGATION =============*/
.navbar-brand img {
    height: 3rem; /* 1rem=16px */
    border-radius: 50%;
}
.navbar {
    padding: .7rem 1rem;  /*.7rem top and bottom,   1rem left and right */
    text-transform: uppercase;  /* affects all letters in the navbar class */
    font-weight: 700 ; /* referenced from the google font link */
    letter-spacing: .1rem; /* space between letters in the navigaton options */
    font-size: .9rem; /* decrease letter size */
    transition: background-color .5s ease;
}
.navbar-nav li {
    padding-right: .8rem; /* pads right each menu option listed to space then out a bit */
}
.navbar-nav .nav-link {
    color: white;  /* for this to work, the navbar-dark boostrap class has to be remove from the 'nav' tag */
    padding-top: .8rem ; /* put here instead of in the li tag to prevent the whole list from going down too much*/
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover {
    color: #1ebba3;
}
.custom-toggler-icon {
    color: white;
    font-size: 1.6rem ;
}
.navbar.solid,
.navbar.solid-toggle {  /* this transparent effect the 'solid' class  actually added and removed by a jquery, to  effect the solidt-ransparent effect */
    background: rgba(0,0,0,0.7) !important;  
    transition: background-color .5s ease;
}               
    
/*-- Remove Button Outline   , the 'a' tag is included because the links are treated as button in this app --*/
button:focus, a.focus a.btn:focus {
    outline: 0;
    -webkit-appearance: none; /* these two lines are included for a generalized compatibility among browsers */
    box-shadow: none;        /* to remove the outline around buttons/a links  */
}
button, a, a.btn, .svg-inline--fa { /* .svg-inline--fa  class   is for all fontawesome elements */
    transition: all .6s ease; /* allows slow changing of color on the hover/focused buttonink */
}

/* 

/*============= LANDING PAGE =============*/

/*--- Fixed Landing Page Section --*/
.landing {
    position: relative; 
    width: 100%;
    height: 100vh;  /* experiment with other numbers, 50vh, 75vh */
    display: table; /* removes the white space at the bottom of the screen*/
    z-index: -1; /* this makes the [arent element (LANDING) behind the child element (home-inner) that holds the actual image */
}
.home-wrap {
    clip: rect(0, auto, auto, 0); /*0-top. auto-right, auto-botto, 0-left. */ 
                                  /*    this limts the  area of the background-image to be displayed */
    position: absolute;
    height: 100%;
    width: 100%;
    top:0;  /* makes sure the entire image fills up the window */
    left:0; 
}

/* landing page background image */
.home-inner { 
    background-image: url('../img/valpics/val013.jpg'); /* 27, ../img/valpics/val013.jpg  ../img/castle/trees01.jpg kendall01a.jpg '../img/computers.jpg')   flowers/flowers01.jpg  ../img/castle/belen03.jpg*/
    position: fixed; /*  image stays put,  postion: relative;  image scrolls up/down*/
    height: 100%;
    width: 100%;  /* takes up the entire window/screen */
    background-size: cover; /*fits the large image to the smaller size screen */
    background-position: center center ;/* center left right, center top bottom*/
    /* what follows below must not be changed. it also works for mobile devices  */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
    display: table;
}

/*--- Fixed Landing Page Section --*/
.landing2 {
    position: relative; 
    width: 100%;
    height: 100vh;  /* experiment with other numbers, 50vh, 75vh */
    display: table; /* removes the white space at the bottom of the screen*/
    z-index: -1; /* this makes the [arent element (LANDING) behind the child element (home-inner) that holds the actual image */
}
.home-wrap2 {
    clip: rect(0, auto, auto, 0); /*0-top. auto-right, auto-botto, 0-left. */ 
                                  /*    this limts the  area of the background-image to be displayed */
    position: absolute;
    height: 100%;
    width: 100%;
    top:0;  /* makes sure the entire image fills up the window */
    left:0; 
}
/* for note.php background */
.home-inner2 { 
    background-image: url('../img/valpics/val006.jpg'); /* '../img/computers.jpg'), '../img/castle/ctree02.jpg'*/
    position: fixed; /*  image stays put,  postion: relative;  image scrolls up/down*/
    height: 100%;
    width: 100%;  /* takes up the entire window/screen */
    background-size: cover; /*fits the large image to the smaller size screen */
    background-position: center center ;/* center left right, center top bottom*/
    /* what follows below must not be changed. it also works for mobile devices  */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
    display: table;
}
/* for weather.php background */
.weather-inner { 
    background-image: url('../img/valpics/val009.jpg'); /* '../img/computers.jpg'), '../img/castle/ctree02.jpg'   ../img/flowers/flowers03.jpg*/
    position: fixed; /*  image stays put,  postion: relative;  image scrolls up/down*/
    height: 100%;
    width: 100%;  /* takes up the entire window/screen */
    background-size: cover; /*fits the large image to the smaller size screen */
    background-position: center center ;/* center left right, center top bottom*/
    /* what follows below must not be changed. it also works for mobile devices  */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
    display: table;
}

/*-- Landing Page Caption --*/
.caption {
    z-index: 1;  /* this causes the caption 'Welcome to Nuno' etcc..  ontop of the landing page background image*/
    position: absolute;
    /* top: 35%;*/ /* 38% orig. this brings the caption 38% from the top of the element/ screen/page */
    top: 30%; /* this is to christmas landing page only, otherwise use 35% */
    width: 100%; /* puts the caption class at the center of the screen */
    max-width: 100% /* prevents the caption from overflowing the */
}
.caption h1 {
    font-size: 3.5rem;
    letter-spacing: .3rem;
    text-shadow: .1rem .1rem .8rem black ; /* .1rem right, .1rem bottom, .8rem raidus, balck - color of shadow */
    padding-bottom: 1rem; /* gives space at bottom to prevent the next text to bump up on the caption h1 */
}
.caption h3{
    font-size: 1.5rem ;
    text-shadow: .1rem .1rem .8rem black ; /* .1rem right, .1rem bottom, .8rem raidus, balck - color of shadow */
    padding-bottom: 2rem; 
}
.caption .btn-lg {
    border-width: medium; /*thin is the default border-width */
    padding: .8rem 1.5rem; /* .8rem top-bottom  1.5rem left-right*/
    font-size: 1.1rem;
}


/*-- Landing2 Page Caption --*/
.caption2 {
    z-index: 1;  /* this causes the caption 'Welcome to Nuno' etcc..  ontop of the landing page background image*/
    position: absolute;
    top: 20%; /* 38% orig. this brings the caption 38% from the top of the element/ screen/page */
    width: 100%; /* puts the caption class at the center of the screen */
    max-width: 100% /* prevents the caption from overflowing the */
}
.caption2 h1 {
    font-size: 3rem;
    letter-spacing: .3rem;
    text-shadow: .1rem .1rem .8rem black ; /* .1rem right, .1rem bottom, .8rem raidus, balck - color of shadow */
    padding-bottom: 1rem; /* gives space at bottom to prevent the next text to bump up on the caption h1 */
}
.caption2 h3{
    font-size: 1.5rem ;
    text-shadow: .2rem .2rem .9rem black ; /* .1rem right, .1rem bottom, .8rem raidus, balck - color of shadow */
    padding-bottom: 2rem; 
}
.caption2 .btn-lg {
    border-width: medium; /*thin is the default border-width */
    padding: .8rem 1.5rem; /* .8rem top-bottom  1.5rem left-right*/
    font-size: 1.1rem;
}
/*-- Bouncing Down Arrow --*/

.arrow {
    position: absolute; /* makes the arrow display on the landing page (not after/below the page */
    bottom: 0; /* puts the arrow at the bottom line of landing page but to the left of the screen.*/
    width: 100%; /*this puts the arrow at the center of the page, bottom line. */
    animation: bounce 2s infinite; /*keeps arrow bouncing forever */
    -webkit-animation: bounce 2s infinite; /* this makes the animation compatible with different browsers  */
}

.down-arrow .svg-inline--fa { 
    color: white;
    font-size: 2.2rem;
    opacity: .3; /* makes it 70% transparent */
}
.down-arrow .svg-inline--fa:hover { 
    opacity: .8; /* makes it 20% transparent */
}

/*============= FEATURES SECTION =============*/

.btn-sm {
    border-width: medium;
    border-radius: 0; /* square corners */
    padding: .5rem 1.1rem; /*makes button appear larger */
    text-transform: uppercase;
    font-size: .9rem;
    margin: 1rem; 
}

.btn-nuno {
    background-color: #1ebba3;
    color:white;
}
.btn-nuno:hover {
    background-color: #189582;
    color:white;
}
h3.heading {
    text-transform: uppercase;
    font-weight: 700; /* from google font */
    font-size: 2.5rem;/* 1.9rem*/
    text-align: center;
    margin-bottom: 1.9rem; /* this gives space between it and the underline under the heading */
}

.heading-underline {
    width: 3rem; /* orig value is 3rem */
    height: .2rem; /* .2rem orig  */
    background-color: #1ebba3;
    margin: 0 auto 0rem; /* 0->top/bottom, auto->left-right, 2rem-> bottom,  centers the underline*/
    /* or you could use a bootstrap class 'mx-auto' to have the same effect. Add it in the HTML file div.*/
}
.feature span {
    color: #1ebba3; /* gives color to the 'circle' icons. the stacked icon remains white due to the 'fa-inverse' class*/
    margin-bottom: .6rem;
}
.feature h3 {
    text-transform: uppercase;
    font-size: 1.3rem;
    padding-bottom: .4rem;
}
/*===== FIXED BACKGROUND IMG DARK =====*/

/*--- iOS Fixed Background Image --*/

.fixed {
    position: relative; 
    width: 100%;
  /*  display: table; */ /* prevents jumping around of image in the background*/
}
.fixed-wrap {
    clip: rect(0, auto, auto, 0); /*0-top. auto-right, auto-botto, 0-left. */ 
                                  /*    this limts the  area of the background-image to be displayed */
    position: absolute;
    height: 100%;
    width: 100%;
    top:0;  /* makes sure the entire image fills up the window */
    left:0; 
    z-index: -9999;/* this is a large z-index to make the image in this class display ON TOP of the HOME-WRAP class*/
}

/* not used ? */
.fixed-dark {
    background-image: url('../img/valpics/val011.jpg'); /* '../img/fixed/apple.jpg' '../img/castle/belen02.jpg' ../img/flowers/flowers04.jpg   ../img/castle/ctree24.jpg*/
    position: fixed; /*  image stays put,  postion: relative;  image scrolls up/down*/
    height: 100%;
    width: 100%;  /* takes up the entire window/screen */
    background-size: cover; /*fits the large image to the smaller size screen */
    background-position: center center ;/* center left right, center top bottom*/
    /* what follows below must not be changed. it also works for mobile devices  */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
    display: table;
    z-index: -1; /* causes the image to display on top of the background image*/
    top:0;  /* removes any spaces at top and left of screen*/
    left:0;
    display:table;
}
.dark {
    background-color: rgba(0,0,0,0.5); /* 70% black, 30% transparent */
    padding: 7rem 0;/* 7rem top-bottom,  0 right-left*/
    z-index: 1000; /* make contect display on top of the background image, pre-empts any other */
                    /* declarations somewhere else */
}

.fixed-wrap2 {
    clip: rect(0, auto, auto, 0); /*0-top. auto-right, auto-botto, 0-left. */ 
                                  /*    this limts the  area of the background-image to be displayed */
    position: absolute;
    height: 100%;
    width: 100%;
    top:0;  /* makes sure the entire image fills up the window */
    left:0; 
    z-index: -9999;/* this is a large z-index to make the image in this class display ON TOP of the HOME-WRAP class*/
}

/* recordings.php*/
.fixed-dark2 {
    background-image: url('../img/valpics/val016.jpg'); /* record5.jpg  ../img/flowers/flowers05.jpg    ../img/castle/ctree05.jpg*/
    position: fixed; /*  image stays put,  postion: relative;  image scrolls up/down*/
    height: 100%;
    width: 100%;  /* takes up the entire window/screen */
    background-size: cover; /*fits the large image to the smaller size screen */
    background-position: center center ;/* center left right, center top bottom*/
    /* what follows below must not be changed. it also works for mobile devices  */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
    display: table;
    z-index: -1; /* causes the image to display on top of the background image*/
    top:0;  /* removes any spaces at top and left of screen*/
    left:0;
    display:table;
}
.dark2 {
    background-color: rgba(0, 0, 0, 0.5); /* 70% black, 30% transparent */
    padding: 7rem 0;/* 7rem top-bottom,  0 right-left*/
    z-index: 1000; /* make contect display on top of the background image, pre-empts any other */
                    /* declarations somewhere else */
}

/* weather.php*/
.weather-dark { /* fixed-dark2 */
    background-image: url('../img/castle/ctree03.jpeg'); /* record5.jpg   flowers/flowers06.jpg */
    position: fixed; /*  image stays put,  postion: relative;  image scrolls up/down*/
    height: 100%;
    width: 100%;  /* takes up the entire window/screen */
    background-size: cover; /*fits the large image to the smaller size screen */
    background-position: center center ;/* center left right, center top bottom*/
    /* what follows below must not be changed. it also works for mobile devices  */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
    display: table;
    z-index: -1; /* causes the image to display on top of the background image*/
    top:0;  /* removes any spaces at top and left of screen*/
    left:0;
    display:table;
}
.weather-dark2 {   /* dark2 */
    background-color: rgba(0, 0, 0, 0.5); /* 70% black, 30% transparent */
    padding: 7rem 0;/* 7rem top-bottom,  0 right-left*/
    z-index: 1000; /* make contect display on top of the background image, pre-empts any other */
                    /* declarations somewhere else */
}

.weather-wrap {  /* fixed-wrap2 */
    clip: rect(0, auto, auto, 0); /*0-top. auto-right, auto-botto, 0-left. */ 
                                  /*    this limts the  area of the background-image to be displayed */
    position: absolute;
    height: 100%;
    width: 100%;
    top:0;  /* makes sure the entire image fills up the window */
    left:0; 
    z-index: -9999;/* this is a large z-index to make the image in this class display ON TOP of the */
}

.fixed-wrap3 {
    clip: rect(0, auto, auto, 0); /*0-top. auto-right, auto-botto, 0-left. */ 
                                  /*    this limts the  area of the background-image to be displayed */
    position: absolute;
    height: 100%;
    width: 100%;
    top:0;  /* makes sure the entire image fills up the window */
    left:0; 
    z-index: -9999;/* this is a large z-index to make the image in this class display ON TOP of the HOME-WRAP class*/
}

.fixed-dark3 {
    background-image: url('../img/valpics/val023.jpg'); /* flowers/flowers07.jpg   ../img/castle/ctree07.jpg */
    position: fixed; /*  image stays put,  postion: relative;  image scrolls up/down*/
    height: 100%;
    width: 100%;  /* takes up the entire window/screen */
    background-size: cover; /*fits the large image to the smaller size screen */
    background-position: center center ;/* center left right, center top bottom*/
    /* what follows below must not be changed. it also works for mobile devices  */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
    display: table;
    z-index: -1; /* causes the image to display on top of the background image*/
    top:0;  /* removes any spaces at top and left of screen*/
    left:0;
    display:table;
}
.dark3 {
    background-color: rgba(0, 0, 0, 0.5); /* 70% black, 30% transparent */
    padding: 7rem 0;/* 7rem top-bottom,  0 right-left*/
    z-index: 1000; /* make contect display on top of the background image, pre-empts any other */
                    /* declarations somewhere else */
}

.fixed-wrap4 {
    clip: rect(0, auto, auto, 0); /*0-top. auto-right, auto-botto, 0-left. */ 
                                  /*    this limts the  area of the background-image to be displayed */
    position: absolute;
    height: 100%;
    width: 100%;
    top:0;  /* makes sure the entire image fills up the window */
    left:0; 
    z-index: -9999;/* this is a large z-index to make the image in this class display ON TOP of the HOME-WRAP class*/
}

/*  not used? */
.fixed-dark4 {
    background-image: url('../img/valpics/val020.jpg'); /*../img/flowers/flowers08.jpg  ../img/castle/ctree19.jpg */
    position: fixed; /*  image stays put,  postion: relative;  image scrolls up/down*/
    height: 100%;
    width: 100%;  /* takes up the entire window/screen */
    background-size: cover; /*fits the large image to the smaller size screen */
    background-position: center center ;/* center left right, center top bottom*/
    /* what follows below must not be changed. it also works for mobile devices  */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
    display: table;
    z-index: -1; /* causes the image to display on top of the background image*/
    top:0;  /* removes any spaces at top and left of screen*/
    left:0;
    display:table;
}
.dark4 {
    background-color: rgba(6, 3, 19, 0.8); /* 70% black, 30% transparent */
    padding: 0 0;/* 7rem top-bottom,  0 right-left*/
    z-index: 1000; /* make contect display on top of the background image, pre-empts any other */
                    /* declarations somewhere else */
}
.fixed-wrap5 {
    clip: rect(0, auto, auto, 0); /*0-top. auto-right, auto-botto, 0-left. */ 
                                  /*    this limts the  area of the background-image to be displayed */
    position: absolute;
    height: 100%;
    width: 100%;
    top:0;  /* makes sure the entire image fills up the window */
    left:0; 
    z-index: -9999;/* this is a large z-index to make the image in this class display ON TOP of the HOME-WRAP class*/
}

/* not used? */
.fixed-dark5 {
    background-image: url('../img/valpics/val021.jpg'); /*https://source.unsplash.com/random/300x202  '../img/kendall-kayden/flowers3.jpeg' ../img/flowers/flowers09.jpg  ../img/castle/belen05.jpeg */
    position: fixed; /*  image stays put,  postion: relative;  image scrolls up/down*/
    height: 100%;
    width: 100%;  /* takes up the entire window/screen */
    background-size: cover; /*fits the large image to the smaller size screen */
    background-position: center center ;/* center left right, center top bottom*/
    /* what follows below must not be changed. it also works for mobile devices  */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
    display: table;
    z-index: -1; /* causes the image to display on top of the background image*/
    top:0;  /* removes any spaces at top and left of screen*/
    left:0;
    display:table;
}
.dark5 {
    background-color: rgba(48, 11, 11, 0.85); /* 70% black, 30% transparent */
    padding: 0 0;/* 7rem top-bottom,  0 right-left*/
    z-index: 1000; /* make contect display on top of the background image, pre-empts any other */
                    /* declarations somewhere else */
}


/* not used? */
.fixed-dark6 {
    background-image: url('..img/valpics/val021.jpg'); /* url('../img/Halloween-2018/patch1.jpg') flowers/flowers10.jpg   ..img/castle/ctree07.jpg */
    position: fixed; /*  image stays put,  postion: relative;  image scrolls up/down*/
    height: 100%;
    width: 100%;  /* takes up the entire window/screen */
    background-size: cover; /*fits the large image to the smaller size screen */
    background-position: center center ;/* center left right, center top bottom*/
    /* what follows below must not be changed. it also works for mobile devices  */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
    display: table;
    z-index: -1; /* causes the image to display on top of the background image*/
    top:0;  /* removes any spaces at top and left of screen*/
    left:0;
    display:table;
}


.dark6 {
    background-color: rgba(6, 3, 19, 0.7); /* 70% black, 30% transparent */
    padding: 0 0;/* 7rem top-bottom,  0 right-left*/
    z-index: 1000; /* make contect display on top of the background image, pre-empts any other */
                    /* declarations somewhere else */
}
/*not used? */
.fixed-dark7 {
    background-image: url('../img/flowers/flowers11.jpg'); /* url('../img/Halloween-2018/patch1.jpg') '../img/kendall-kayden/flowers1.jpg'*/
    position: fixed; /*  image stays put,  postion: relative;  image scrolls up/down*/
    height: 100%;
    width: 100%;  /* takes up the entire window/screen */
    background-size: cover; /*fits the large image to the smaller size screen */
    background-position: center center ;/* center left right, center top bottom*/
    /* what follows below must not be changed. it also works for mobile devices  */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
    display: table;
    z-index: -1; /* causes the image to display on top of the background image*/
    top:0;  /* removes any spaces at top and left of screen*/
    left:0;
    display:table;
}

/* not used */
.fixed-dark8 {
    background-image: url('../img/flowers/flowers12.jpg'); /* url('../img/Halloween-2018/patch1.jpg') '../img/halloween-2018/bats3.jpg'*/
    position: fixed; /*  image stays put,  postion: relative;  image scrolls up/down*/
    height: 100%;
    width: 100%;  /* takes up the entire window/screen */
    background-size: cover; /*fits the large image to the smaller size screen */
    background-position: center center ;/* center left right, center top bottom*/
    /* what follows below must not be changed. it also works for mobile devices  */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
    display: table;
    z-index: -1; /* causes the image to display on top of the background image*/
    top:0;  /* removes any spaces at top and left of screen*/
    left:0;
    display:table;
}

/*============= PORTFOLIO SECTION =============*/
/* you may use the below instead of the 'overflow-hidden' bootstrap class used in the html reference
.portfolio-item img {    
    overflow: hidden; 
}
*/
.portfolio-item img:hover {
    transform: scale(1.3); /* enlarge image 10 130% */
    cursor: zoom-in;
}

.portfolio-item img {
    transition: transform .4s ease;
}

/*============= PRICING SECTION =============*/
.pricing-column {
    background-color: white;
    height: 100%; /* 100% makes the 3 columns equal in height. But this needs the class 'display-flex' */
    padding: 1.6rem;
    border-top: .25rem solid #1ebba3;
    box-shadow: 0 0 .8rem rgba(0,0,0,.075); /* 0 horizontal, 0 vertical .8rem radius  black color of shadow*/
    transition: transform .7s ease;
    position: relative; /*needed so that the 'Best Value' ribbon goes with it as it is scaled */
    overflow: hidden; /* clips the  ribbon so that it appears within the pricing column*/
}
.pricing-column:hover {
    transform: scale(1.1); /* makes it slightly larger during hover */
}
.pricing-column h4 {
    font-size: 1.1rem;
    font-weight: 700;  /* bold from the google font link */
}
.ribbon {   /* this is the "Best Buy" notice on the pringing column */
    background-color: #6c757d;
    color: white;
    font-size: .8rem;
    font-weight: 700;
    height: 2rem;
    width: 10rem;
    padding-top: .4rem; /* centers 'Best Value' on background */
    position: absolute;
    transform: rotate(45deg);
    right: -2.8rem;
    top: 1.5rem;
    box-shadow: 0 0 .2rem rgba(0,0,0,.25);
}

/*============= TEAM SECTION FIXED BG IMG LIGHT =============*/

/*--- blog browser  --*/
.fixed-light {
    background-image: url('../img/valpics/valrose01.jpg'); /*../img/castle/belen04.jpg'  '../img/fixed/office.jpg' ,'../img/castle/ctree12.jpg'  ../img/flowers/flowers13.jpg*/
    position: fixed; /*  image stays put,  postion: relative;  image scrolls up/down*/
    height: 100%;
    width: 100%;  /* takes up the entire window/screen */
    background-size: cover; /*fits the large image to the smaller size screen */
    background-position: center center ;/* center left right, center top bottom*/
    /* what follows below must not be changed. it also works for mobile devices  */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
    display: table;
    z-index: -1; /* causes the image to display on top of the background image*/
    top:0;  /* removes any spaces at top and left of screen*/
    left:0;
    display:table;
}
/* used in album_browser.php only*/
.fixed-light5 {
    background-image: url('../img/valpics/valrose02.jpeg'); /* ../img/castle/belen06.jpg',  ../img/crackedwall.png' , '../img/castle/ctree16.jpeg' ../img/flowers/flowers14.jpg*/
    position: fixed; /*  image stays put,  postion: relative;  image scrolls up/down*/
    height: 100%;
    width: 100%;  /* takes up the entire window/screen */
    background-size: cover; /*fits the large image to the smaller size screen */
    background-position: center center ;/* center left right, center top bottom*/
    /* what follows below must not be changed. it also works for mobile devices  */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
    display: table;
    z-index: -1; /* causes the image to display on top of the background image*/
    top:0;  /* removes any spaces at top and left of screen*/
    left:0;
    display:table;
}

.light5 {  /* used in blog-browser.php */
   /* background-color: rgba(255, 255, 255, 0.6); */ /* 70% black, 30% transparent */
   background-color: rgba(0,0,0, 0.5); /* tried for a dark background for album browser */
    padding: 5rem 0;/* 7rem top-bottom,  0 right-left*/
    z-index: 1000; /* make contect display on top of the background image, pre-empts any other */
                    /* declarations somewhere else */
}

/* used in fun_browser.php only*/
.fixed-light6 {
    background-image: url('../img/valpics/valrose03.jpg'); /*/img/fireworks09.jpg '../img/image1.jpg', '../img/castle/belen04.jpg' ../img/flowers/flowers15.jpg */
    position: fixed; /*  image stays put,  postion: relative;  image scrolls up/down*/
    height: 100%;
    width: 100%;  /* takes up the entire window/screen */
    background-size: cover; /*fits the large image to the smaller size screen */
    background-position: center center ;/* center left right, center top bottom*/
    /* what follows below must not be changed. it also works for mobile devices  */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
    display: table;
    z-index: -1; /* causes the image to display on top of the background image*/
    top:0;  /* removes any spaces at top and left of screen*/
    left:0;
    display:table;
}
/* used by album_browser.php */
.light6 {  /* used in blog-browser.php */
    background-color: rgba(0,0,0, 0.5); /* 70% black, 30% transparent */
    padding: 5rem 0;/* 7rem top-bottom,  0 right-left*/
    z-index: 1000; /* make contect display on top of the background image, pre-empts any other */
                    /* declarations somewhere else */
}

.light {
    background-color: rgba(255, 255, 255, 0.75); /* 70% black, 30% transparent */
    padding: 5rem 0;/* 7rem top-bottom,  0 right-left*/
    z-index: 1000; /* make contect display on top of the background image, pre-empts any other */
                    /* declarations somewhere else */
}

.light2 {  /* used in blog-browser.php */
   /* background-color: rgba(255, 255, 255, 0.3); */ /* 70% black, 30% transparent */
   background-color: rgba(0,0,0, 0.3); 
    padding: 5rem 0;/* 7rem top-bottom,  0 right-left*/
    z-index: 1000; /* make contect display on top of the background image, pre-empts any other */
                    /* declarations somewhere else */
}


.owl-stage {  /* this class is automaically added by bootstrap. To see it, use  inspect  on a specific element */
    display: flex; /* type of display that equalizes/nromalies the height of cards in a container */
}
.card {
    height: 100%; /* this works with the 'display: flex ' to make the cards equal in height although of different contents sizes*/
    border-radius: 0;
    text-align: center;
    margin: 0 1rem; /*  0 top-bottom  1rem left-right */
    border: .1rem solid rgba(0,0,0,.075);
    box-shadow: 0, 0, .8rem rgba(0,0,0,0.075); /* 0 top-bottom  0 left-right  .8rem shadow/border radius   rgba  color*/
    transition: transform .5s ease;
}
.card:hover {
    transform: scale(0.95); /* makes card slightly smaller during h0ver */
}


.blog-card {  /* this is for blog2.php  */
    height: 100%; /* this works with the 'display: flex ' to make the cards equal in height although of different contents sizes*/
    border-radius: 0;
    text-align: left;
    margin: 0 1rem; /*  0 top-bottom  1rem left-right */
    border: .1rem solid rgba(0,0,0,.075);
    box-shadow: 0, 0, .8rem rgba(0,0,0,0.075); /* 0 top-bottom  0 left-right  .8rem shadow/border radius   rgba  color*/
    transition: transform .5s ease;
}

/* .blog-card:hover { */
 /* transform: scale(.99); */
 /* makes card slightly smaller during h0ver */
/* } */

button.owl-dot.active span,  /* formats the buttons controlling the carousel */
button.owl-dot:hover span { 
    background: #1ebba3 !important;
}
ul.social {
    list-style: none; /* removes the bullets */
    margin: 0;
    padding: 0;
    font-size: 1rem;    
}
ul.social li {
    display: inline; /* icons appear in horizontal line  */
    padding-right: .8rem;
}
ul.social li a{
    color: #1ebba3;
    transition: all .1s ease;
}
ul.social li a:hover {
    color: #505962;
}

/*============= SKILLS SECTION =============*/
/* this section is not needed for styling */

/*============= CLIENTS SECTION ============= USED IN ORIGINAL INDEX.PHP IN TUTORIAL*/

#clients-carousel {
    max-width: 1200px;
    margin: 0 auto; /* center it horizontally*/
}
.clients img {
    border-radius: 50%; /* makes the image circular */
    transition: transform .3s ease;;
}
.clients img:hover {
    transform: scale(.95);
}
blockquote .svg-inline--fa { /* colors the social icons */
    margin: 1rem;
    color: #1ebba3;
}
.clients-hr {
    border-top: .1rem solid #1ebba3;
}


/*============= FUNTIME SECTION =============* used in FUN_BROWSER.PHP */
/*  this may not be neecessary */
#funtime-carousel {
    max-width: 1200px;
    margin: 0 auto; /* center it horizontally*/
}
.funtime img {
    border-radius: 50%; /* makes the image circular */
    transition: transform .3s ease;;
}
.funtime img:hover {
    transform: scale(.95);
}
blockquote .svg-inline--fa { /* colors the social icons */
    margin: 1rem;
    color: #1ebba3;
}
.funtime-hr {
    border-top: .1rem solid #b2b5b8;

}

/*============= ALBUMS SECTION/PAGE =============used in ALBUM_BROWSER.PHP*/
#albums-carousel {
    max-width: 1200px;
    margin: 0 auto; /* center it horizontally*/
}
.albums img {
    border-radius: 50%; /* makes the image circular */
    transition: transform .3s ease;;
}
.albums img:hover {
    transform: scale(.95);
}
blockquote .svg-inline--fa { /* colors the social icons */
    margin: 1rem;
    color: #1ebba3;
}
.albums-hr {
    border-top: .1rem solid #1ebba3;

}

/*============== recording section ===========*/

/*============= CONTACT SECTION =============*/
.offset2:before { /* this causes the referenced portion land just below the navigation, instaed of under it*/
    content: '' ;
    height: 5rem; /*  4rem (or you can adjust this) is the height of the navigation */
    display: block;
    margin-top: -5rem; /* to adjust the position of the referenced portion */
}
.offset3:before { /* this causes the referenced portion land just below the navigation, instaed of under it*/
    content: '' ;
    height: 4.95rem; /*  4rem (or you can adjust this) is the height of the navigation */
    display: block;
    margin-top: -4.95rem; /* to adjust the position of the referenced portion */
}

.offset4:before { /* this causes the referenced portion land just below the navigation, instaed of under it*/
    content: '' ;
    height: -10rem; /*  4rem (or you can adjust this) is the height of the navigation */
    display: block;
    margin-top: -10rem; /* to adjust the position of the referenced portion */
}
.footer {
    background: url("../img/footer/footer.jpg") no-repeat ;
    background-size: cover;
    color: white; /* makes letters white*/   
}
.row.outer {
    background-color: rgba(57,63,70,.85); /* red, grn, blu, opacity/transparency */
    /* this background-color is ON TOP of the footer image */
    padding: 1rem 2rem 3rem; /* 3rem on top, 2rem on the sides,  3rem on the bottom */
}
.footer img {
    height: 5rem; /*  3rem orig*/
    /* margin: 1rem 0; /* 1.5rem top and bottom,  0 left and right */
    border-radius:50%;
}
.footer a,
.footer ul.social li a {
    color: white;
}
.footer ul.social li a:hover {
    color: #1ebba3;
}
.footer h3 { /* formats the Contact Us text */
    text-transform: uppercase;
    margin: 1.5rem 0;
}

/*--- Contact Form --*/
.form-group {
    margin-bottom: 1.3rem ;
}
.form-control {
    background-color: #53595f;
    border-radius: 0;
    border: .15rem solid #666b71;
    color: white !important;
    font-size: 1.1rem;
}
.form-control:focus {
    background-color: #53595f;
    border: .15rem solid #666b71;
}
.form-group input::placeholder,
.form-group textarea::placeholder { /* use double colons '::' to target the attribute , one colon ':' for psuedo classes like 'focus', 'hover'*/
    color: #b2b5b8 !important; 
}
hr.socket {
    border-top: .2rem solid #666b71;
    width: 100%; /* without the width , you will not  see the horiontal rule */
}

/*============= TOP SCROLL =============*/
a.top-scroll {
    right: 1.2rem;
    bottom: 1.2rem;
    position: fixed;
    opacity: .3;
    z-index: 1000 ; /* a large z-index ensures that the angle-up icon is always on top of the content*/
    display: none; /*so the button does not appear on load yet */
} 
a.top-scroll:hover {
    opacity: .5;
}
.top-scroll .svg-inline--fa {  /* references the fa and fa-angle-up */
    background: white;
    color: #53595f;
    font-size: 3rem; /* adjusts the  size of the angle-up icon */
    height: 1.7rem;  /* this is a trick. it automatically centers the icon on its background */
}


/*============= MEDIA QUERIES =============*/

/* Devices under 992px (lg) */
@media (max-width: 991.28px) {
    .caption h1 {
        font-size: 3.5rem;
        letter-spacing: .2rem;
        padding-bottom: .8rem; /* gives space at bottom to prevent the next text to bump up on the caption h1 */
    }
    .caption h3{
        font-size: 2.2rem ;
        padding-bottom: 1.7rem; 
    }
    .caption .btn-lg {
        padding: .7rem 1.2rem; /* .8rem top-bottom  1.5rem left-right*/
        font-size: 1rem;
    }

    .clients img {
        max-width: 50%; 
        margin: 0 auto; /* centers the image */
    }
    .albums img {
        max-width: 50%; 
        margin: 0 auto; /* centers the image */
    }

}

/* Devices under 768px (md) */
@media (max-width: 767.98px) {
    .caption h1 {
        font-size: 2.7rem;
        letter-spacing: .15rem;
        padding-bottom: .5rem; /* gives space at bottom to prevent the next text to bump up on the caption h1 */
    }
    .caption h3{
        font-size: 1.7rem ;
        padding-bottom: 1.2rem; 
    }
    .caption .btn-lg {
        padding: .6rem 1.1rem; /* .8rem top-bottom  1.5rem left-right*/
    }

    #features h1 {
        font-size: 2rem ;
    }

    .fixed-dark {
        background-image: url('../img/valpics/valrose09.jpg'); /*'../img/fixed/apple-mobile.jpg'../img/flowers/flowers01.jpg */
    }

    .fixed-light {
        background-image: url('../img/valpics/valrose10.jpg'); /*'../img/fixed/office-mobile.jpg' ../img/flowers/flowers02.jpg*/
    }

    .footer {
        background: url("../img/footer/footer-mobile.jpg") no-repeat ;

    }

    .top-scroll {
        display: none !important; /* '!important'  needed to override the jquery controlling the top-scroll button */
    }
 }

/* Devices under 576px (sm) */
@media (max-width: 576px) { 
    .caption h1 {
        font-size: 1.9rem;
        letter-spacing: .1rem;
        padding-bottom: .4rem; /* gives space at bottom to prevent the next text to bump up on the caption h1 */
    }
    .caption h3{
        font-size: 1.2rem ;
        padding-bottom: 1rem; 
    }
    .caption .btn-lg {
        padding: .4rem .9rem; /* .8rem top-bottom  1.5rem left-right*/
        font-size: .9rem;;
    }

    .black_chancery_bold{
        font-size: 40px !important;
    }
    .belly_betty_bold {   
        font-size: 60px !important;
    }
}


/*============ BOOTSTRAP BREAK POINTS:

Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

=============*/