@font-face {
    font-family: supermarket;
    src: url(fonts/supermarket.woff);
}

body { color: #808080; background: #ffffff; }
a { text-decoration: none; }

.menu { position: fixed; top: 0; left: 0; right: 0; min-height: 50px; line-height: 50px; background: #000; color: #fff; z-index: 99; opacity: 0.8; }
.menu * { opacity: 1; }
.menu a { color: white; }
.menu a:hover { color: #e2b588; text-decoration: none; }
.menu-logo { position: absolute; left: 25px; height: 100%; font-size: 1.5em; }
.menu-logo img { margin-right: 5px; }
.menu-items { text-align: right; padding: 0; margin: 0; margin-right: 25px; list-style-type: none }
.menu-item { display: inline-block; font-weight: bold; }
.menu-item a { display: inline-block; height: 100%; text-shadow: none; }
.menu-item a:hover { color: #e2b588 }
.menu-separator { color: #fff; margin-left: 20px; margin-right: 20px; }
.menu .pull { display: none; }

.section { color: #808080; width: 100%; padding: 50px 0; background-color: #ffffff; }
.section.dark { background-color: #e6e6e6; }
.section .section-container { padding: 30px 15px; max-width: 1200px; margin: 0 auto; }
.section .section-name { color: black; font-weight: bold; font-size: 3em; padding: 20px 0 60px 0; text-align: center; }
.section .section-name-sub { color: #808080; font-weight: bold; font-size: 2em; padding: 0 0 60px 0; margin-top: -60px; text-align: center; }

#home .logo { text-align: center; margin: 130px 0; }
#home .logo .name { font-family: supermarket; color: #b3b3b3; font-size: 2.2em; padding-top: 20px; }

#studio-rental .photos { width: 50%; float: left; text-align: right; }
#studio-rental .photos .carousel { margin-right: 40px; max-width: 350px; display: inline-block; }
#studio-rental .text { width: 50%; float: left; padding: 0 20px 0 0; font-size: 1.2em; }
#studio-rental .text .big { font-size: 1.4em; font-weight: bold; }
#studio-rental .text .price { padding: 15px; background: white; border-radius: 10px; }
#studio-rental .text .price span {  font-weight: bold; }
#studio-rental .price-list .big { font-size: 1.5em; font-weight: bold; text-align: center; margin-top: 40px; }
#studio-rental .price-list table { width: 95%; max-width: 600px; margin: 20px auto; background-color: #f9f2f2; }
#studio-rental .price-list .category { background-color: #b3b3b3; text-align: center; color: #ffffff; }
#studio-rental .price-list td, #studio-rental .price-list th { border: 1px solid lightgray; padding: 5px 10px; }
#studio-rental .price-list tr td:nth-child(2) { text-align: center; }

#about .photos { width: 50%; float: left; text-align: right; }
#about .photos .carousel { margin-right: 40px; max-width: 350px; display: inline-block; }
#about .text { width: 50%; float: left; padding: 40px 20px 0 0; font-size: 1.2em; }
#about .text .big { font-size: 1.6em; font-weight: bold; }
#about .author { text-align: right; font-weight: bold; }

#gallery .photos { width: 50%; float: left; text-align: right; }
#gallery .photos .carousel { margin-right: 40px; max-width: 350px; display: inline-block; }
#gallery .text { width: 50%; float: left; padding: 0 20px 0 0; font-size: 1.2em; }
#gallery .text .big { font-size: 1.4em; font-weight: bold; }
#gallery .text .price { padding: 15px; background: white; border-radius: 10px; }
#gallery .text .price span {  font-weight: bold; }
#gallery .price-list .big { font-size: 1.5em; font-weight: bold; text-align: center; margin-top: 40px; }
#gallery .price-list table { width: 95%; max-width: 600px; margin: 20px auto; background-color: #f9f2f2; }
#gallery .price-list .category { background-color: #b3b3b3; text-align: center; color: #ffffff; }
#gallery .price-list td, #gallery .price-list th { border: 1px solid lightgray; padding: 5px 10px; }
#gallery .price-list tr td:nth-child(2) { text-align: center; }

#portfolio .category { width: 33.33%; float: left; text-align: center; }
#portfolio .category .category-container { padding: 10px; }
#portfolio .category .name { color: #808080; font-weight: bold; font-size: 1.4em; padding: 30px 0 20px 0;  }
#portfolio .video { max-width: 600px; }
#portfolio .video iframe { width: 100%; height: 205px; }

#portfolio ul.my-video { list-style: none; margin: 0; padding: 0; }
#portfolio ul.my-video li { display: block; width: 33.33%; float: left; }
#portfolio ul.my-video li img { width: 100%; max-width: 100px; }

#portfolio ul.my-photo { list-style: none; margin: 0; padding: 0; }
#portfolio ul.my-photo li { display: block; width: 25%; float: left; }
#portfolio ul.my-photo li img { width: 100%; max-width: 100px; }

#portfolio ul.printing { list-style: none; margin: 0; padding: 0; }
#portfolio ul.printing li { display: block; width: 25%; float: left; }
#portfolio ul.printing li img { width: 100%; max-width: 100px; }

#galleries .galleries .gallery { width: 16%; float: left; text-align: center; padding: 1px; margin: 0px; border: 0px solid #000;}
#galleries .galleries .gallery img:hover { border: 1px solid #39FF14;}
#galleries .galleries .gallery img { padding: 4px; max-width: 150px; }
#galleries .galleries .gallery .desc { font-size: 1.2em; padding: 1px; text-align: center; }

#services .services .service { width: 25%; float: left; text-align: center; padding: 10px; }
#services .services .service .icon img { width: 100%; max-width: 181px; }
#services .services .service .name { font-size: 1.2em; font-weight: bold; height: 100px; padding-top: 20px; }

#clients .flexslider { border-color: #dddddd; }

#contact { text-align: center; }
#contact #google-map { width: 100%; height: 600px; }
#contact .address { padding-top: 20px; }
#contact .address .company-name { font-size: 1.2em; }
#contact p a { color: inherit; font-weight: normal; border-bottom: 1px dotted #dddddd; }

.footer { text-align: center; padding: 20px; }

.clear-fix { clear: both; }

.carousel-control.left { background: none; }
.carousel-control.right { background: none; }

/* Large desktop */
@media (min-width: 1200px) {
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 980px) and (max-width: 1199px) {
    #studio-rental .text .price span { display: block; }
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
    .menu { height: auto; }
    .menu-items { display:none; margin-top: 40px; }
    .menu-items li { display: block; }
    .menu-items .menu-separator { display: none; }
    .menu .pull { display: block; position: relative; text-align: right; }
    .menu .pull:after { content: ""; background: url('../images/icons/ic_nav.png') no-repeat; width: 30px; height: 30px; display: inline-block; position: absolute; right: 5px; top: 15px; }

    #studio-rental .text .price span { display: block; }

    #services .services .service { width: 50%; }
	
    #galleries .galleries .gallery { width: 30%; }

    #portfolio .category .name { min-height: 125px; };
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
    .menu { height: auto; }
    .menu-items { display:none; margin-top: 40px; }
    .menu-items li { display: block; }
    .menu-items .menu-separator { display: none; }
    .menu .pull { display: block; position: relative; text-align: right; }
    .menu .pull:after { content: ""; background: url('../images/icons/ic_nav.png') no-repeat; width: 30px; height: 30px; display: inline-block; position: absolute; right: 5px; top: 15px; }

    #home .logo { text-align: center; margin: 80px 0; }

    #studio-rental .photos { float: none; width: 100%; text-align: center; }
    #studio-rental .photos .carousel { margin-right: 0; }
    #studio-rental .text { float: none; width: 100%; padding-right: 0; }
    #studio-rental .text .big { text-align: center; margin-top: 30px; }
    #studio-rental .text .price span { display: block; }

    #services .services .service { width: 100%; }
	
    #galleries .galleries .gallery { width: 100%; }

    #about .photos { float: none; width: 100%; text-align: center; }
    #about .photos .carousel { margin-right: 0; }
    #about .text { float: none; width: 100%; padding-right: 0; }

    #portfolio .category { width: 100%; float: none; }

    #contact #google-map { width: 100%; height: 300px; }
}

/* Landscape phones and down */
@media (max-width: 480px) {
}