/**************  Lesson 5 - Adding Fonts ***********/
@import url(http://fonts.googleapis.com/css?family=Oswald:400,700); /*This line of code imports your Google font files, so that you can use them in your CSS. It must be at the beginning of your CSS file */

/*@import url (https://fonts.googleapis.com/css?family=Yatra+One:400,700);*/

@font-face { 
 /* font-family: 'Elizabeth'; /* Defines the name of the custom font */
  src: url('//cdn2.hubspot.net/hub/327485/file-1537293221-eot/Masterclass_Assets/jurassic-park.eot?') format('eot'), url('//cdn2.hubspot.net/hub/327485/file-1537293226-woff/Masterclass_Assets/jurassic-park.woff') format('woff'), url('//cdn2.hubspot.net/hub/327485/file-1537020567-ttf/Masterclass_Assets/jurassic-park.ttf') format('truetype');
} /* Source URLs of where the fonts are hosted. */

body{
    font-family: sans-serif; /* Defines a font for the body. This font will be inherited by all elements */
}

h1, h2, h3, h4, h5, h6{
   /* font-family: sans-serif; *//* Defines a header font*/
    font-weight:inherit; /* Makes the font-weight inherited from the body */
}



/* Responsive Grid */

.row-fluid {
    width: 100%;
    *zoom: 1;
}

.row-fluid:before, .row-fluid:after {
    display: table;
    content: "";
}

.row-fluid:after {
    clear: both;
}

.row-fluid [class*="span"] {
    display: block;
    float: left;
    width: 100%;
    min-height: 28px;
    margin-left: 2.127659574%;
    *margin-left: 2.0744680846382977%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

.row-fluid [class*="span"]:first-child {
    margin-left: 0;
}

.row-fluid .span12 {
    width: 99.99999998999999%;
    *width: 99.94680850063828%;
}

.row-fluid .span11 {
    width: 91.489361693%;
    *width: 91.4361702036383%;
}

.row-fluid .span10 {
    width: 82.97872339599999%;
    *width: 82.92553190663828%;
}

.row-fluid .span9 {
    width: 74.468085099%;
    *width: 74.4148936096383%;
}

.row-fluid .span8 {
    width: 65.95744680199999%;
    *width: 65.90425531263828%;
}

.row-fluid .span7 {
    width: 57.446808505%;
    *width: 57.3936170156383%;
}

.row-fluid .span6 {
    width: 48.93617020799999%;
    *width: 48.88297871863829%;
}

.row-fluid .span5 {
    width: 40.425531911%;
    *width: 40.3723404216383%;
}

.row-fluid .span4 {
    width: 31.914893614%;
    *width: 31.8617021246383%;
}

.row-fluid .span3 {
    width: 23.404255317%;
    *width: 23.3510638276383%;
}

.row-fluid .span2 {
    width: 14.89361702%;
    *width: 14.8404255306383%;
}

.row-fluid .span1 {
    width: 6.382978723%;
    *width: 6.329787233638298%;
}

.container-fluid {
    *zoom: 1;
}

.container-fluid:before, .container-fluid:after {
    display: table;
    content: "";
}

.container-fluid:after {
    clear: both;
}

@media (max-width: 767px) {
    .row-fluid {
        width: 100%;
    }

    .row-fluid [class*="span"] {
        display: block;
        float: none;
        width: auto;
        margin-left: 0;
    }
}

@media (min-width: 768px) and (max-width: 1139px) {
    .row-fluid {
        width: 100%;
        *zoom: 1;
    }

    .row-fluid:before, .row-fluid:after {
        display: table;
        content: "";
    }

    .row-fluid:after {
        clear: both;
    }

    .row-fluid [class*="span"] {
        display: block;
        float: left;
        width: 100%;
        min-height: 28px;
        margin-left: 2.762430939%;
        *margin-left: 2.709239449638298%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
    }

    .row-fluid [class*="span"]:first-child {
        margin-left: 0;
    }

    .row-fluid .span12 {
        width: 99.999999993%;
        *width: 99.9468085036383%;
    }

    .row-fluid .span11 {
        width: 91.436464082%;
        *width: 91.38327259263829%;
    }

    .row-fluid .span10 {
        width: 82.87292817100001%;
        *width: 82.8197366816383%;
    }

    .row-fluid .span9 {
        width: 74.30939226%;
        *width: 74.25620077063829%;
    }

    .row-fluid .span8 {
        width: 65.74585634900001%;
        *width: 65.6926648596383%;
    }

    .row-fluid .span7 {
        width: 57.182320438000005%;
        *width: 57.129128948638304%;
    }

    .row-fluid .span6 {
        width: 48.618784527%;
        *width: 48.5655930376383%;
    }

    .row-fluid .span5 {
        width: 40.055248616%;
        *width: 40.0020571266383%;
    }

    .row-fluid .span4 {
        width: 31.491712705%;
        *width: 31.4385212156383%;
    }

    .row-fluid .span3 {
        width: 22.928176794%;
        *width: 22.874985304638297%;
    }

    .row-fluid .span2 {
        width: 14.364640883%;
        *width: 14.311449393638298%;
    }

    .row-fluid .span1 {
        width: 5.801104972%;
        *width: 5.747913482638298%;
    }
}

@media (min-width: 1280px) {
    .row-fluid {
        width: 100%;
        *zoom: 1;
    }

    .row-fluid:before, .row-fluid:after {
        display: table;
        content: "";
    }

    .row-fluid:after {
        clear: both;
    }

    .row-fluid [class*="span"] {
        display: block;
        float: left;
        width: 100%;
        min-height: 28px;
        margin-left: 2.564102564%;
        *margin-left: 2.510911074638298%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
    }

    .row-fluid [class*="span"]:first-child {
        margin-left: 0;
    }

    .row-fluid .span12 {
        width: 100%;
        *width: 99.94680851063829%;
    }

    .row-fluid .span11 {
        width: 91.45299145300001%;
        *width: 91.3997999636383%;
    }

    .row-fluid .span10 {
        width: 82.905982906%;
        *width: 82.8527914166383%;
    }

    .row-fluid .span9 {
        width: 74.358974359%;
        *width: 74.30578286963829%;
    }

    .row-fluid .span8 {
        width: 65.81196581200001%;
        *width: 65.7587743226383%;
    }

    .row-fluid .span7 {
        width: 57.264957265%;
        *width: 57.2117657756383%;
    }

    .row-fluid .span6 {
        width: 48.717948718%;
        *width: 48.6647572286383%;
    }

    .row-fluid .span5 {
        width: 40.170940171000005%;
        *width: 40.117748681638304%;
    }

    .row-fluid .span4 {
        width: 31.623931624%;
        *width: 31.5707401346383%;
    }

    .row-fluid .span3 {
        width: 23.076923077%;
        *width: 23.0237315876383%;
    }

    .row-fluid .span2 {
        width: 14.529914530000001%;
        *width: 14.4767230406383%;
    }

    .row-fluid .span1 {
        width: 5.982905983%;
        *width: 5.929714493638298%;
    }
}

/* Clearfix */

.clearfix {
    *zoom: 1;
}

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

.clearfix:after {
    clear: both;
}

/* Visibilty Classes */

.hide {
    display: none;
}

.show {
    display: block;
}

.invisible {
    visibility: hidden;
}

.hidden {
    display: none;
    visibility: hidden;
}

/* Responsive Visibilty Classes */

.visible-phone {
    display: none !important;
}

.visible-tablet {
    display: none !important;
}

.hidden-desktop {
    display: none !important;
}

@media (max-width: 767px) {
    .visible-phone {
        display: inherit !important;
    }

    .hidden-phone {
        display: none !important;
    }

    .hidden-desktop {
        display: inherit !important;
    }

    .visible-desktop {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 1139px) {
    .visible-tablet {
        display: inherit !important;
    }

    .hidden-tablet {
        display: none !important;
    }

    .hidden-desktop {
        display: inherit !important;
    }

    .visible-desktop {
        display: none !important ;
    }
}


/**************  Lesson 2 - Foundation CSS *************/

*, *:before, *:after{
    box-sizing:border-box; /* This makes all elements disregard the box-model, meaning widths and heights include padding, margin, and border */
    }
    
body{
    margin:0; /* Removes the margin around your content that browsers add by default. Also included in normalize.css */
    font-size:16px; /* Sets a base font size inherited by other elements */
    font-weight:100; /* Sets a base font-weight values range from 100-700 (light-bold) */
    letter-spacing:1.2px; /* Sets a base letter spacing */
}

.header-container-wrapper{
    background:#ffffff; /* Sets a background color for the header section */
}

.body-container-wrapper{
    background:#FFFFFF; /* Sets a background color for the body section */
}

.footer-container-wrapper{
    background:#467ad2; /* Sets a background color for the footer section */
}


a{
    text-decoration:none; /* Removes the underline from links */
    color:#2E0854; /* Sets a link color */
}

a:hover{
    color:#c2e7db; /* Sets a hover link color */
}

    h1 {
    color:#BDA0CB;
    opacity: 0.5;
   /* Set the color of your headings */
    }
    
     h2, h3, h4, h5, h6{
    color:#BDA0CB;
    /* Set the color of your headings */
    }

#testimonials h2{
    color:#000000; /* Colors the Testimonials heading black*/
}

.footer-container{
    color:#467ad2;
}










/**************  Lesson 3 - Setting up your layout ****************/

.page-center{
    max-width:1080px; 
    margin:0 auto!important; 
    display:block; 
    padding: 27px 0;
    float:none!important;
 
}



#bg-image{
    background: url('https://cdn2.hubspot.net/hubfs/527184/engagement%20dinner.jpg'); /* Sets the background image */
    background-size:cover; /* Makes the image stretch to cover the entire width/height of the row */
    
}

#contest, #about{
    background: #816687;
    }

#attractions{
    background:#ffffff; /* Defines background color of the Attractions and Headline rows */
}

#testimonials{
    background:#D3BECF; /* Defines background color of the Testimonials row */
}

#trailer{
    background:#8af0e8; /* Defines background color of the Trailers row */
    }


.custom-logo img{
    margin:0 auto; /* Centers logo */
    display:block; /* Required to center using margin */
}

.footer-container{
    text-align:center; /* Centers text in footer */
    
}

.page-center h1{
    text-align:center; /* Centers the main headline*/
    color: #FFFFFF; /* Changes the headline font color of h1 to white */
    font-size:70px; /* Sets h1 font size */
    text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4); /*Adds a dropshadow to the headline*/

}

.page-center h2{
    font-size:40px; /* Defines a font-size */
    text-align:center; /* Centers the headings of each row */
    margin: 0 0 20px 0; /* Sets a margin bottom of 20px */
}



.row-fluid .headline{
    display:table; /* Vertical align is only supported by tables; therefore to center an element vertically, its direct parent must use display:table; */
    min-height:350px; /* Sets a min-height for the table element */
    width:100%;
      
}

.headline .cell-wrapper {
    display:table-cell; /* The element that is being vertically centered must use display:table-cell; */
    vertical-align:middle; /* vertically centers the main headline */
    
}

    


/* If you don't want to use the additional group with a class of page-center in your template, below is an alternate method for centering divs
without the addition of an extra group. This method is based on what number the row is in the layout. 

.row-fluid {
    max-width: 1080px;
    margin: 0 auto;
    display: block;
    float: none
}

.body-container>.row-fluid-wrapper:first-child {
    max-width:none;
    width:100%;
    background:blue; 
}

.body-container>.row-fluid-wrapper:nth-child(2) {
    max-width:none;
    width:100%;
    background:gray;
}
*/










/**************  Lesson 4 - Fluid Media *****************/

img, video {
    max-width:100%; /* Makes images and HTML 5 video tags scale up to their natural size */
    height:auto; /* Keeps image and video dimensions proportional */
    
}

/* Because YouTube embed code is an iFrame, it's width and height do not properly scale by default. Below is code to make YouTube videos responsive.
If you use the Embed feature in HubSpot's editor, your YouTube video gets automatically wrapped in a div with this class
*/
.hs-responsive-embed-youtube { 
    position: relative; /* Positions the wrapper relative to other elements on the page */
    padding-bottom: 56.25%; /* This padding forces the YouTube video to maintain a standard 16:9 widescreen aspect ratio */
    padding-top: 25px; /* Adds padding to the top */
    height: 0; /* The wrapper div is given a height of 0 */
}
 
.hs-responsive-embed-youtube iframe {
    position: absolute; /* Takes the iFrame out of the flow of the page and positions it within the relative wrapper div */
    top: 0; /* Positions the video to the top of the parent container */
    left: 0; /* Positions the video to the left of the parent container */
    width: 100%!important; /* Forces the iFrame video to expand to the full width of the container*/
    height: 100%!important; /* Forces the iFrame video to expand to height of the container, but constrained by its padding */
    border:none; /* Removes the border from the iFrame */

}









    
/**************  Lesson 6 - Advanced Positioning ********************/

.dino{
    position:relative; /* Allows child elements to be positioned within this group */
    margin-bottom:25px; /* Adds space below the dino images */
    
}

.dino-text{
    position:absolute; /* Positions the descriptions within the parent .dino div */
    top:0; /* Positions the descriptions at the very top of the parent div */
    left:0; /* Positions the descriptions at the very left of the dino div */
    background:rgba(0, 0, 0, .7); /* Sets a semi-transparent background color for the description overlay */
    color:#FFFFFF; /* Colors the text of a description */
    height:100%; /* Makes the height of the div 100% (this ony works for elements that are absolutely positioned) */
    opacity:0; /* Makes the description transaprent */
    padding:20px; /* Adds a lip around the description */
    cursor:pointer; /* Makes the cursor turn into a hand when moused over */
    
    
    
    
}

.dino-text h2{
    text-align:left; /* Aligns the description headings to the left */
}

.dino:hover .dino-text{
    opacity:1; /* Changes the opacity to reveal the description on hover */
}

#testimonials img{
    border-radius:280px; /* Rounds the Testimonial images */
    display:block;
    margin:0 auto;/* Centers the Testimonial images */
    
}



.headshot{
    position:relative; /* Allows child elements to be positioned within this group */
}

.quote{
    color:#FFFFFF; /* Colors the quote white */
    position:absolute; /* Positions the quote relative to its parent */
    bottom:40px; /* Positions the quote 40px off of the bottom of the container */
    text-align:center; /* Centers the quote */
    z-index:10; /* Because we are positioning this over an <img>, we need to set a z-index greater than 1 */
    font-weight:inherit; /* Inherits the base font weight */
    width:100%!important; /* Makes the quote 100% of container. !important used for mobile, because I was being lazy */
    text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4); /* Adds a transparent drop shadow to the quote */
}








/**************  Lesson 7 - Menu styling *****************/

.hs-menu-wrapper > ul{
    max-width:768px; /* Sets a max-width of the menu */
    display:block; /* sets the menu unordered list to be a block element */
    margin:0 auto; /* Centers the menu */
    list-style:none; /* Removes the bullets */
    margin-top:25px; /* Adds some space above the menu */
    padding:0; /* Removes the default UL padding */
}

.hs-menu-wrapper > ul > li{
    display:inline-block; /* Makes the menu list items display block, this way the line up against each other, but still act like block elements */
    width:20%; /* Set the width of the menu items, since my example menu has 5 items, I set the width to 20% */
    text-align:center; /* Aligns the menu text to the center of the menu items */
    float:left; /* Floats the elements to line up. This fixes an issue where inline-block elements take up additional horizontal space and drop onto the next line */
    position:relative; /* Allows child menu to be positioned relative to its parent */
}

.hs-menu-wrapper ul li a{
    color:#7C3F7C; /* Colors the menu link text */
    text-decoration:none; /* Removes the underlines */
    font-size:20px; /* Sets the font size*/
}
.hs-menu-wrapper ul li a:hover{
    color:#C8A2C8; /* Changes the link color on hover */
}


ul.hs-menu-children-wrapper{
    position:absolute; /* Takes the child menu out of the flow of the page and positions it */
    border-radius:50px;
    list-style:none; /* Removes the bullets from child menu */
    background:#2891df; /* Sets a background color of child menu */
    padding:0; /* Removes the padding of child menu */
    width:100%; /* Makes the child menu 100% of the width of its parent */
    display:none; /* Hides the child menu */

}

ul.hs-menu-children-wrapper li{
    margin:20px 0; /* Sets space between child list items */
}

ul.hs-menu-children-wrapper li a{
    color:#3cdde1; /* Colors the links of the child list item links */
}

ul.hs-menu-children-wrapper li a:hover{
    color:#4e79f0; /* Colors the link of the child list item links on hover */
}

.hs-menu-wrapper ul li.hs-item-has-children:hover ul.hs-menu-children-wrapper{
    display:block; /* Makes child menu appear on hover */
}







/************* Lesson 8 - Form Styling ***************/

form.hs-form{
    display:block; /* Treats form element like a block */
    margin:0 auto; /* Centers block element */
    max-width:500px; /* sets a max-width of the form to 500px */
}

.hs-input, form.hs-form fieldset.form-columns-1 .hs-input { /* The longer selector is used to override the CSS added by the form's Javascript */
    width:100%; /* Sets the width of the form fields to be 100% of their container */
    border-radius:8px; /* Rounds the corners of the form fields */
    font-size:16px; /* Sets the font-size of the form fields */
    height:42px; /* Sets the height of the fields */
    border: 1px groove #C2C2C2; /* Adds a border to the fields */
    padding:8px; /* Adds padding to the fields (included in the height due to box-sizing:border-box; */
}

form.hs-form textarea{
    height: 75px!important; /* Sets the height of the long-text field */
}

.hs-form-field > label{
    margin:15px 0; /* Adds space between each question on the form */
    display:block;
}

form.hs-form fieldset.form-columns-1 input[type="radio"]{
    width:auto; /* Makes the width of the radio select checkboxes to auto*/
    height:16px; /* Sets the height of the checkbox radio select field */
    margin-right:15px; /* Adds space next to the select option */
}

.hs-field-desc{
    font-size:13px; /* Sets the font size of the help text */
}

.hs-form input[type="submit"]{
    width:100%; /* Makes the submit button 100% of width of container*/
    max-width:200px; /* Sets a max width of the submit button*/
    height:50px; /* Sets the height of the submit button */
    background:#467ad2; /* Sets a background color of the submit button */
    color:#FFFFFF; /* Sets the text color of the submit button */ 
    border:3px solid #fff; /* Removes the border of the submit button */ 
    border-radius: 12px; /* Rounds the corners */ 
    -webkit-appearance: none; /* Removes the automatic styling added by Chrome and Safari */ 
    margin-top:17px; /* Adds space above the submit button */ 
    font-size:30px; /* Changes font size of submit button */ 
    font-family:yatra-one;
    cursor:crosshair; /* Makes cursor turn into a hand when you mouse over */

 
}

.hs-form input[type="submit"]:hover{
    background:#2c4774; /* Changes the background of the submit button when you hover */ 
}

form ul{
    list-style:none; /* Removes bullets from lists within forms (such as on radio select options) */
   padding:0; /* Removes padding from lists within forms */
}











/************** Lesson 9 - Media Queries ***************/

@media (max-width:768px){
.hs-menu-wrapper > ul > li{
        width:100%; /* Makes menu items snap out to 100% from 20% on viewports smaller than 768px. This causes the menu items to stack nicely */
    }
    
ul.hs-menu-children-wrapper{
        position:relative; /* This property changes the position of the child menu from absolute to relative, thus spacially including it in the header of the page */
    }
    
ul.hs-menu-children-wrapper li{
    margin:0; /* Removes the space between child menu items on mobile */
}

.headshot{
    margin-bottom:25px; /* Adds space between the headshots when they stack */
}

#about img{
    float:none!important; /* Removes the float from the image being wrapped by text on screensizes less than 768px */
    margin:0 auto 25px auto!important; /* Centers the image in the About section */
    display:block; /* Treats the image like a block element allowing it to be centered with margin */
   
}

#about .page-center, #contest .page-center{
    padding:25px; /* Adds a gutter to the sides of the contest and the about section */
    
}
    
    }
    
    
    
    
    
    
    
    
/************** Lesson 10 - CSS3 Fanciness **************/

a{
   transition:  color .3s ease-in-out; /* CSS3 transition that fades the colors of links when you hover over. CSS3 transitions should also include the vendor prefixes below */
   -webkit-transition:  color .3s ease-in-out;
    -moz-transition:  color .3s ease-in-out;
    -ms-transition:  color .3s ease-in-out;
    -o-transition:  color .3s ease-in-out; 
}



.dino-text{
    transition: opacity .3s ease-in-out; /* CSS3 transition that fades in the description of the dinosaurs when moused over.  */
    -webkit-transition:  opacity .3s ease-in-out;
    -moz-transition:  opacity .3s ease-in-out;
    -ms-transition:  opacity .3s ease-in-out;
    -o-transition:  opacity .3s ease-in-out;
}

.hs-form input[type="submit"]{
    transition:  background .3s ease-in-out; /* CSS3 transition that fades in background color of the submit button on hover  */
    -webkit-transition:  background .3s ease-in-out;
    -moz-transition:  background .3s ease-in-out;
    -ms-transition:  background .3s ease-in-out;
    -o-transition:  background .3s ease-in-out;
}


ul.hs-menu-children-wrapper{
    display:block; /* Undoes the display:none; added in an earlier section */
    max-height:0; /* Sets the menu to have no height */
    overflow:hidden; /* Hides the overflow of content that would appear outside of the 0 height wrapper */
    transition: all .3s ease-in-out; /* CSS3 transition that affects all CSS properties  */
    -webkit-transition:  all .3s ease-in-out;
    -moz-transition:  all .3s ease-in-out;
    -ms-transition:  all .3s ease-in-out;
    -o-transition:  all .3s ease-in-out;
}

.hs-menu-wrapper ul li.hs-item-has-children:hover ul.hs-menu-children-wrapper{
    max-height:220px; /* On hover of a menu item with children, update the max-height of the child ment to 220px. This will the appearance of the child menu dropping down */
  
}

#bg-image{
    background-position: center top; /* BG position code required for parallax */
    background-repeat: no-repeat; /* Causes background image no to tile/repeat */
    background-attachment: fixed; /* Fixes the background image in place, required for parallax */
}