1. @charset "utf-8";
  2.  
  3.     body {
  4.         background-color: #b2c5bf;
  5.         font-size: 100%;
  6.     }
  7.  
  8.     a {
  9.         text-decoration: none;
  10.         color: #1082ba;
  11.     }
  12.  
  13.     #container {
  14.         background-color: #FFFFFF;
  15.         height: 100%;
  16.         width: 80%;
  17.         position: relative;
  18.         margin-left: auto;
  19.         margin-right: auto;
  20.         overflow: hidden;
  21.         padding: 0 1.5%;
  22.        
  23.     } /* container is 80% of browser window */
  24.  
  25.  
  26.     /* SEPERATE BANNER FOR INDEX PAGE!!!!! */
  27.     #homebannerwrapper {
  28.         position: relative;
  29.         margin: 0 auto;
  30.         width: 100%;
  31.         background-color: #ea7764;
  32.     }
  33.  
  34.     #homebannerwrapper h1 {
  35.         font-family: 'Open Sans', sans-serif;
  36.         font-size: 6em; /* 96px */
  37.         font-weight: 200;
  38.         color: #FFFFFF;
  39.         text-transform: uppercase;
  40.         position: absolute;
  41.         top: -7%;
  42.         width: 80%;
  43.         margin-bottom: 0;
  44.     }
  45.    
  46.     #indexbanner {
  47.         margin: 0;
  48.         width: 100%;
  49.         line-height: 0;
  50.     }
  51.  
  52.    
  53.  
  54.     #indexnavigation {
  55.         width: 100%;
  56.         position: relative;
  57.         margin: 0 auto 7%;
  58.         z-index: 1;
  59.         padding: 0;
  60.    
  61.     }
  62.    
  63.    
  64.    
  65.  
  66.  
  67.  
  68.     #banner {
  69.         position: relative;
  70.         margin-left: auto;
  71.         margin-right: auto;
  72.         width: 100%;
  73.         height: 100%;
  74.         line-height: 0;
  75.         overflow: hidden;
  76.         background-color: #ea7764;
  77.         margin-bottom: 5%;
  78.        
  79.        
  80.     } /* banner and navigation are 97% of container */
  81.    
  82.     #masthead {
  83.         width: 100%;
  84.     }
  85.  
  86.     #logo {
  87.         max-width: 100%;
  88.         float: right;
  89.         margin-right: 2%;
  90.         margin-top: 1%;
  91.         width: 9%;
  92.         margin-bottom: 1%;
  93.        
  94.     }
  95.  
  96.  
  97.  
  98.  
  99.     #navigation {
  100.         width: 90%;
  101.         position: absolute;
  102.         bottom: -30px;
  103.         z-index: 0;
  104.         left: 0.5%;
  105.     }
  106.  
  107.     li.navilinks {
  108.         float: left;
  109.         margin: 0;
  110.         display: block;
  111.         padding: 2px 8px;
  112.         text-decoration: none;
  113.         font-weight: 300;
  114.         color: #000000;
  115.         background-color: #ea7764;
  116.         font-family: 'Open Sans', sans-serif;
  117.         font-size: 100%;
  118.         margin-top: 8px;
  119.         margin-left: 5px;
  120.      }
  121.  
  122.     /* seperate for index because it needs 100% */
  123.     ul#indexnavi {
  124.         width: 100%;
  125.        
  126.         float: left;
  127.         margin: 0 0 0 0;
  128.         padding: 0;
  129.         list-style: none;
  130.         background-color: #ea7764;
  131.        
  132.        
  133.      }
  134.  
  135.     ul#navi {
  136.         width: 100%;
  137.        
  138.         float: left;
  139.         margin: 0 0 3em 0;
  140.         padding: 0;
  141.         list-style: none;
  142.         background-color: #ea7764;
  143.        
  144.        
  145.      }
  146.  
  147.     a.navilinkstyle:link,a.navilinkstyle:visited {
  148.         font-weight: 300;
  149.         color:#000000;
  150.         text-align:center;
  151.         padding:4px;
  152.         margin: 0;
  153.         text-decoration:none;
  154.         text-transform:uppercase;
  155.    
  156.     }
  157.  
  158.     a.navilinkstyle:hover,a.navilinkstyle:active {
  159.         margin: 0;
  160.         color:#FFFFFF;
  161.     }
  162.  
  163.     a.link {
  164.         font-family: Helvetica, sans-serif;
  165.         color: #1082ba;
  166.         text-transform: none;
  167.     }
  168.  
  169.  
  170.  
  171.  
  172.  
  173.  
  174.     /*FOOTER!!!!!FOOTER!!!!!FOOTER!!!!!FOOTER!!!!!
  175.     FOOTER!!!!!FOOTER!!!!!FOOTER!!!!!FOOTER!!!!!*/
  176.    
  177.     #footer {
  178.         position: relative;
  179.         margin: 0 auto;
  180.         background-color: #FFFFFF;
  181.         width: 80%;
  182.         margin-bottom: 1%;
  183.         padding: 0 1.5% 1%;
  184.         height: 100%;
  185.         overflow: hidden;
  186.     }
  187.    
  188.     #footerwrapper {
  189.         position: relative;
  190.         width: 60%;
  191.         margin-left: auto;
  192.         margin-right: auto;
  193.         margin-bottom: 0.25%;
  194.         padding-bottom: 3%;
  195.         padding-top: 10%;
  196.     }
  197.  
  198.     img#filmstrap {
  199.         position: relative;
  200.         margin: 0 auto;
  201.         width: 100%;
  202.     }
  203.  
  204.     footer {
  205.         font-size: 80%;
  206.         text-align: center;
  207.     }
  208.  
  209.  
  210.  
  211.  
  212.  
  213.  
  214.  
  215.  
  216.  
  217.  
  218.     /*INDEX COMPONENTS!!!!!!!!! INDEX COMPONENTS!!!!!!!!! INDEX COMPONENTS!!!!!!!!! INDEX COMPONENTS!!!!!!!!! INDEX COMPONENTS!!!!!!!!!
  219. INDEX COMPONENTS!!!!!!!!! INDEX COMPONENTS!!!!!!!!! INDEX COMPONENTS!!!!!!!!! INDEX COMPONENTS!!!!!!!!! INDEX COMPONENTS!!!!!!!!!
  220. INDEX COMPONENTS!!!!!!!!! INDEX COMPONENTS!!!!!!!!! INDEX COMPONENTS!!!!!!!!! INDEX COMPONENTS!!!!!!!!! INDEX COMPONENTS!!!!!!!!!   */
  221.  
  222.     #rightimagewrapper {
  223.         float: right;
  224.         width: 25%;
  225.     }
  226.  
  227.     img.frontimages {
  228.         width: 100%;
  229.         clear: left;
  230.         margin-bottom: 0.75%;
  231.     }
  232.  
  233.     #finerollingimage {
  234.         float: left;
  235.        
  236.     }
  237.  
  238.  
  239.    
  240.     #indextextbox {
  241.         width: 65%;
  242.         float: left;
  243.     }
  244.    
  245.    
  246.     p.paragraph {
  247.         font-family: 'Open Sans', sans-serif;
  248.         font-weight: 400;
  249.         float: left;
  250.         margin-bottom: 50px;
  251.     }
  252.    
  253.     h2.fronttitle {
  254.         font-family: 'Open Sans', sans-serif;
  255.         font-size: 600%;
  256.         font-weight: 8em;
  257.         color: #1082ba;
  258.         text-decoration: underline;
  259.         float: left;
  260.         margin-bottom: 10%;
  261.         margin-top: 1%;;
  262.        
  263.     }
  264.    
  265.     h3.frontsubheads {
  266.         font-family: 'Open Sans', sans-serif;
  267.         text-transform: uppercase;
  268.         font-weight: 900;
  269.         float: left;
  270.         margin: 0;
  271.     }
  272.        
  273.        
  274.        
  275.     p {
  276.         font-family: 'Open Sans', sans-serif;
  277.         font-weight: 300;
  278.         font-size: 100%;
  279.         line-height: 1.5;
  280.         margin: 0;
  281.         padding: 0;
  282.     }
  283.        
  284.     h1 { /* TITLES OF PAGES */
  285.         position: absolute;
  286.         font-family: 'Open Sans', sans-serif;
  287.         font-size: 6em;
  288.         font-weight: 300;
  289.         color: #FFFFFF;
  290.         text-transform: uppercase;
  291.         margin-left: 1.5%;
  292.        
  293.         width: 70%;
  294.     }
  295.  
  296.     h2 {
  297.         font-family: 'Open Sans', sans-serif;
  298.         font-size: 700%;
  299.         font-weight: 100;
  300.         color: #1082ba;
  301.         text-decoration: underline;
  302.     }
  303.  
  304.     h3 {
  305.         font-family: 'Open Sans', sans-serif;
  306.         text-transform: uppercase;
  307.         font-weight: 900;
  308.         margin: 0;
  309.         padding: 0;
  310.     }
  311.    
  312.     h4 {
  313.         font-family: 'Open Sans', sans-serif;
  314.         font-size: 400%;
  315.         font-weight: 100;
  316.         color: #1082ba;
  317.     }
  318.  
  319.    
  320.  
  321.    
  322.  
  323. /* PRODUCTIONS COMPONENTS!!!!!!!!!!! */
  324.  
  325.     div.productioncontainer {
  326.         width: 90%;
  327.         position: relative;
  328.         margin: 0 auto 10%;
  329.     }
  330.    
  331.    
  332.     img.videos {
  333.         width: 100%;
  334.     }
  335.    
  336.  
  337.  
  338.     h4.productiontitles {
  339.         font-family: 'Helvetica Neue Light', 'Helvetica Neue', Arial, sans-serif;
  340.         font-size: 200%;
  341.         font-weight: 100;
  342.         color: #1082ba;
  343.         text-align: center;
  344.         margin: 0;
  345.         margin-bottom: 2%;
  346.     }
  347.  
  348.     p.productionsbody {
  349.         font-family: "Helvetica Neue", sans-serif;
  350.         font-weight: 200;
  351.         position: relative;
  352.         margin: 0;
  353.     }
  354.    
  355.     div.videoinfo a {
  356.         text-decoration: none;
  357.     }
  358.    
  359.    
  360.    
  361.    
  362.    
  363.    
  364.    
  365.    
  366.    
  367.    
  368.    
  369.     /*PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES
  370.     PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES
  371.     PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES
  372.     PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES */
  373.    
  374.     div#weddingswrapper {
  375.         float: left;
  376.         margin-left: 1.5%;
  377.         width: 45%;
  378.         clear: both;
  379.         margin-bottom: 5%;
  380.     }
  381.    
  382.     div#businessswrapper {
  383.         float: right;
  384.         margin-right: 1.5%;
  385.         width: 45%;
  386.         margin-bottom: 5%;
  387.     }
  388.    
  389.     div#otherwrapper {
  390.         float: right;
  391.         margin-right: 1.5%;
  392.         width: 45%;
  393.     }
  394.    
  395.     div#musicwrapper {
  396.         float: left;
  397.         width: 45%;
  398.         margin-left: 1.5%;
  399.     }
  400.    
  401.     div.pricewrapper {
  402.         width: 100%;
  403.     }
  404.    
  405.     p.pricesinfo {
  406.         font-family: "Helvetica Neue", sans-serif;
  407.         font-weight: 200;
  408.         margin: 0;
  409.         float: left;
  410.     }
  411.    
  412.     h4.pricestitle {
  413.         font-family: 'Helvetica Neue Light', 'Helvetica Neue', Arial, sans-serif;
  414.         font-size: 250%;
  415.         font-weight: 100;
  416.         color: #1082ba;
  417.         margin: 0;
  418.         float: left;
  419.         margin-bottom: 2%;
  420.         margin-left: 1.5%;
  421.     }
  422.    
  423.     h3.prices {
  424.         margin: 0;
  425.         margin-left: 2.5%;
  426.         float: left;
  427.         clear: both;
  428.     }
  429.    
  430.    
  431.    
  432.    
  433.    
  434.    
  435.  
  436. /*  CONTACT US   CONTACT US    CONTACT US    CONTACT US    CONTACT US   CONTACT US    CONTACT US    CONTACT US    CONTACT US
  437. CONTACT US   CONTACT US    CONTACT US    CONTACT US    CONTACT US   CONTACT US    CONTACT US    CONTACT US    CONTACT US
  438. CONTACT US   CONTACT US    CONTACT US    CONTACT US    CONTACT US   CONTACT US    CONTACT US    CONTACT US    CONTACT US
  439. CONTACT US   CONTACT US    CONTACT US    CONTACT US    CONTACT US   CONTACT US    CONTACT US    CONTACT US    CONTACT US  */
  440.  
  441.  
  442.     #telephone {
  443.         float: left;
  444.         width: 46%;
  445.         margin-bottom: 9%;
  446.         clear: left;
  447.  
  448.     }
  449.    
  450.     #email {
  451.         float: right;
  452.         width: 46%;
  453.    
  454.         clear: right;
  455.     }
  456.    
  457.     #networks {
  458.         float: left;
  459.         width: 46%;
  460.    
  461.         clear: left;
  462.     }
  463.    
  464.     #post {
  465.         float: right;
  466.         width: 46%;
  467.        
  468.         clear: right;
  469.     }
  470.    
  471.     h4.contacttitles {
  472.         font-size: 250%;
  473.         position: relative;
  474.         top: 0px;
  475.         margin: 0 auto 5px;
  476.     }
  477.    
  478.     ul.contactinfo {
  479.         margin: 0;
  480.         position: relative;
  481.         left: 5px;
  482.         top: 10px;
  483.     }
  484.  
  485.     li.contactitems {
  486.         font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  487.         font-size: 1em;
  488.         font-weight: 200;
  489.     }
  490.    
  491.     /* need to replace with images */
  492.     img.contacticon {
  493.         width: 30%;
  494.         float: left;
  495.        
  496.     }
  497.    
  498.     li {
  499.         font-family: 'Helvetica Neue Light', 'Helvetica Neue', Arial, sans-serif;
  500.         font-size: 100%;
  501.         text-decoration: none;
  502.         display: block;
  503.         margin-bottom: 5px;
  504.     }
  505.    
  506.    
  507.     /*ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US
  508. ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US
  509. ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US*/
  510.    
  511.     #abouttext {
  512.         float: left;
  513.         width: 50%;
  514.        
  515.     }
  516.    
  517.     #abouttext h2 {
  518.         margin-top: 0;
  519.     }
  520.        
  521.     #aboutimagewrapper {
  522.         float: right;
  523.         width: 45%;
  524.         margin-top: 5%;
  525.     }
  526.    
  527.     img.aboutimages {
  528.         width: 100%;
  529.         margin-bottom: 2%;
  530.     }
  531.    
  532.    
  533.    
  534.    
  535.    
  536.    
  537.     /* MEDI` QUERIES */
  538.  
  539. @media screen and (max-width: 480px) {
  540.  
  541.         #container, #footer {
  542.             width: 95%;
  543.     }
  544.    
  545.         footer {
  546.             font-size: 70%;
  547.         }
  548.  
  549.         #homebannerwrapper h1 {
  550.             font-size: 220%;
  551.     }
  552.        
  553.         h1 {
  554.             font-size: 220%;
  555.         }
  556.    
  557.        
  558.         li.navilinks {
  559.         font-size: 65%;
  560.         padding: 0.25% 0;
  561.         margin: 0;
  562.     }
  563.  
  564.         #finerollingimage {
  565.         width: 97%;
  566.         position: relative;
  567.         margin-left: 1.5%;
  568.        
  569.     }
  570.  
  571.         h2.fronttitle {
  572.         font-size: 400%;
  573.     }
  574.    
  575.         #navigation {
  576.             bottom: -40px;
  577.         }
  578.  
  579.     /*INDEXINDEXINDEX*/
  580.    
  581.         div#rightimagewrapper {
  582.             display: none;
  583.         }
  584.    
  585.         #indextextbox {
  586.         width: 90%;
  587.     }
  588.    
  589.    
  590.     /*CONTACTCONTACTCONACT*/
  591.    
  592.         #telephone {
  593.         position: relative;
  594.         margin: 0 auto 12%;
  595.         width: 90%;
  596.         float:none;
  597.  
  598.     }
  599.    
  600.     #email {
  601.         position: relative;
  602.         margin: 0 auto 12%;
  603.         width: 90%;
  604.         float:none;
  605.     }
  606.    
  607.     #networks {
  608.     position: relative;
  609.         margin: 0 auto 12%;
  610.         width: 90%;
  611.         float:none;
  612.     }
  613.    
  614.     #post {
  615.         position: relative;
  616.         margin: 0 auto 12%;
  617.         width: 90%;
  618.         float:none;
  619.     }
  620.    
  621.     div.contacticonwrap {
  622.         position: relative;
  623.         width: 100%;
  624.         margin: 0 auto;
  625.     }
  626.    
  627.     h4.contacttitles {
  628.         font-size: 200%;
  629.         text-align: center;
  630.     }
  631.    
  632.     li.contactitems {
  633.         font-size: 70%;
  634.         text-align: center;
  635.         float: none;
  636.     }
  637.    
  638.     img.contacticon {
  639.         width: 50%;
  640.         margin: 0 auto;
  641.         position: relative;
  642.         display: block;
  643.         float: none;
  644.     }
  645.    
  646.     ul.contactinfo {
  647.         position: relative;
  648.         margin: 0 auto;
  649.         text-align: center;
  650.         left: 0;
  651.         top: 0;
  652.         display: block;
  653.         float: none;
  654.     }
  655.    
  656.     /*ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US
  657.     ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US */
  658.    
  659.     #abouttext {
  660.         width: 100%;
  661.         margin-bottom: 8%;
  662.     }
  663.    
  664.     #aboutimagewrapper {
  665.         position: relative;
  666.         margin: 0 auto;
  667.         width: 95%;
  668.         float: none;
  669.     }
  670.    
  671. }
  672.  
  673.  
  674.  
  675.  
  676.  
  677. @media screen and (min-width: 480px) and (max-width: 600px) {
  678.  
  679.         #container, #footer {
  680.             width: 100%;
  681.     }
  682.  
  683.         #homebannerwrapper h1 {
  684.             font-size: 2.75em;
  685.     }
  686.    
  687.         h1 {
  688.             font-size: 3.5em;
  689.         }
  690.    
  691.         h2.fronttitle {
  692.         font-size: 450%;
  693.     }
  694.    
  695.    
  696.         li.navilinks {
  697.         font-size: 75%;
  698.         padding: 0.25% 0;
  699.         margin: 1%;
  700.     }
  701.    
  702.         #navigation {
  703.             bottom: -40px;
  704.         }
  705. }
  706.    
  707.  
  708. @media screen and (min-width: 600px) and (max-width: 780px) {
  709.  
  710.         #container, #footer {
  711.             width: 100%;
  712.     }
  713.  
  714.  
  715.         #homebannerwrapper h1 {
  716.             font-size: 3.5em;
  717.     }
  718.    
  719.         h1 {
  720.             font-size: 3.5em;
  721.         }
  722.        
  723.    
  724. }
  725.  
  726.  
  727. @media screen and (min-width: 780px) and (max-width: 850px) {
  728.  
  729.         #homebannerwrapper h1 {
  730.             font-size: 4em;
  731.     }
  732.         h1 {
  733.             font-size: 4em;
  734.         }
  735.        
  736.  
  737. }
  738.  
  739.  
  740. @media screen and (min-width: 850px) and (max-width: 1000px) {
  741.  
  742.         #homebannerwrapper h1 {
  743.             font-size: 5em;
  744.     }
  745.    
  746.         h1 {
  747.             font-size: 5em;
  748.         }
  749.        
  750.    
  751. }