/*
Theme Name: Brooklyn Child
Theme URI: http://www.unitedthemes.com
Description: Creative Portfolio
Version: 2.4.4
Author: United Themes
Author URI: http://www.unitedthemes.com
Template: brooklyn
*/

@import url("../brooklyn/style.css");  

html {    -webkit-text-size-adjust: none; /* Prevent font scaling in landscape */ }


@font-face {
    font-family: 'geosanslightregular';
    src: url('http://www.alustil.com.my/beginn/fonts/geosanslight-webfont.eot');
    src: url('http://www.alustil.com.my/beginn/fonts/geosanslight-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://www.alustil.com.my/beginn/fonts/geosanslight-webfont.woff') format('woff'),
         url('http://www.alustil.com.my/beginn/fonts/geosanslight-webfont.ttf') format('truetype'),
         url('http://www.alustil.com.my/beginn/fonts/geosanslight-webfont.svg#geosanslightregular') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'geosanslightmedium_italic';
    src: url('http://www.alustil.com.my/beginn/fonts/geosanslight-oblique-webfont.eot');
    src: url('http://www.alustil.com.my/beginn/fonts/geosanslight-oblique-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://www.alustil.com.my/beginn/fonts/geosanslight-oblique-webfont.woff') format('woff'),
         url('http://www.alustil.com.my/beginn/fonts/geosanslight-oblique-webfont.ttf') format('truetype'),
         url('http://www.alustil.com.my/beginn/fonts/geosanslight-oblique-webfont.svg#geosanslightmedium_italic') format('svg');
    font-weight: normal;
    font-style: normal;

}


#navigation ul li a { font-family: 'geosanslightregular'; letter-spacing: 2px; font-size: 14px; -webkit-text-stroke: 0.3px; }


#contact-section { display: none; }

::-moz-selection { color: #ffffff !important; background-color:#b7b7b7 !important; }
::selection { color: #ffffff !important; background-color:#b7b7b7 !important; }

#navigation .selected, #navigation ul li.current_page_parent a.active, #navigation ul li.current-menu-ancestor a.active { color: #fff !important; }

#navigation li a:hover { color: #fff !important; }

.ut-hide-member-details:hover, #ut-blog-navigation a:hover, .light .ut-hide-member-details, .ut-mm-trigger.active .ut-mm-button:before, .ut-mobile-menu a:after { color: #fff !important; }

.ut-header-dark .ut-mobile-menu a { color:#fff; }
.ut-mobile-menu a:hover { background-color:#b7b7b7 !important; }
.ut-mobile-menu a:after { content: ""; top: 0; left: 0; }
.ut-header-dark .ut-mobile-menu a, .ut-mobile-menu a { padding: 10px 0px 10px 10px; font-family: 'geosanslightregular'; letter-spacing: 2px; -webkit-text-stroke: 0.3px; }

.ut-mm-button:before { content: "\f0c9"; font-size: 25px; }
.ut-mm-button:hover:before { color: #b7b7b7 !important; }

.ut-hero-style-1 .hero-title { background-image: none; }

#my-homeslider { position: absolute; /*width: 75%;*/ width: 60%; background-color: rgba(0, 0, 0, 0.8); background-repeat: repeat-x; padding: 30px; /*margin: 0px -65% 0;*/ margin-left:-20%; text-align:right; height: 120px;
	-webkit-transform: translateY(0%);
	-moz-transform: translateY(0%);
	transform: translateY(0%);
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s; }
	
#my-logo { float:right; background-color: rgba(0, 0, 0, 0.8); background-repeat: repeat-x; padding: 15px 10px; height: 120px; right: 0; position: fixed; transition: all 0.2s linear 0s;  }
	

.hero-inner h1 { font-size: 0px; line-height: 0; }

h1, h2, h3, h4, h5, h6 { font-family: 'geosanslightregular' !important; letter-spacing: 3px !important; -webkit-text-stroke: 0.3px; }


.footer { font-family: 'geosanslightregular' !important; letter-spacing: 2px !important; -webkit-text-stroke: 0.3px; text-transform: uppercase;  }
.copyright a { font-size: 10gpx !important; letter-spacing: 2px !important; padding: 0 10px; }
.copyright a:hover { color:#fff !important; } 

#box-content { width: 80%; margin: 0 auto; }

#box-content h1 { color:#000; font-size: 20px; }
#box-content h2 { color:#665247; }

#box-content h1.box-title { text-align: center; }
#box-content h2.box-title { text-align: center; margin-bottom: 40px; text-transform: uppercase; }
#box-content h1.box-title.white { color: #888888; }

#box-content .ut-btn.theme-btn { background-color:#000 !important; margin: 0; }
#box-content .ut-btn.theme-btn.center { text-align: center; }

#box-content.full { width: 90%; margin: 0 auto; }



#box-content-left {  margin: 0 auto; }

#box-content-left h1 { color:#000; font-size: 20px; }
#box-content-left h2 { color:#665247; }

#box-content-left h1.box-title { text-align: left; }
#box-content-left h2.box-title { text-align: left; margin-bottom: 40px; }



#design-02 { text-align: center; margin: 40px auto; }
#design-03 { margin-bottom: -80px; }
#design-03 .tp-bullets.simplebullets.round .bullet { background-color: #fff !important; }
#design-03 .tp-bullets.simplebullets.round .bullet.selected { background: none !important; }


#begin { /*padding-top: 0 !important; padding-bottom: 0 !important;*/ }
#begin .ut-one-half { width: 50%; margin-right: 0%; }

#begin-01 { height: 100%; min-height: 500px; }
#begin-01 iframe { margin-top: 0px; }

#begin-02 { /*padding-top: 80px; padding-bottom: 60px;*/ }
#begin-02 .ut-nav-tabs { text-align: center; margin-bottom: 30px; }
#begin-02 .ut-nav-tabs li { display: inline-block; float: none; margin: 0 auto; text-align: center; width: 145px; }

#begin-03 { font-size: 80%; margin-top: 60px; }
#begin-03 h4 { color:#665247; }

#begin-04 { font-size: 80%; margin-top: 60px; }
#begin-04 h4 { color:#665247; }
#begin-04 ul { margin-left: 10px; }

#innovation { /*padding-top: 0 !important; padding-bottom: 0 !important;*/ }
#innovation .ut-one-half { width: 50%; margin-right: 0%; }

#innovation-01 { width:60%; text-align: center; margin: 0 auto; }
#innovation-01 { padding-top: 0px; padding-bottom: 0px; }

#innovation-02 { width: 80%; margin: 50px auto 0; }
#innovation-02 .ut-portfolio-info { top: 80%; padding: 0; }
#innovation-02 .ut-portfolio-info .portfolio-title { font-size: 12px; background: rgba(0,0,0,0.8); padding: 5px 0; }
#innovation-02 .ut-portfolio-info span { display: none; }


#innovation-02 .ut-hover img { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ *//* Webkit Nightlies & Chrome Canary */}

#innovation-02 .ut-hover:hover img { filter: none; -webkit-filter: none; }


#contact { /*padding-top: 0 !important; padding-bottom: 0 !important;*/ }
#contact .ut-one-half { width: 50%; margin-right: 0%; }
#contact .ut-split-content-right { padding-top: 0px; padding-bottom: 0px; }
#contact h2 { color:#fff !important; text-transform: uppercase; margin-bottom: 0px; }

#contact-01 { opacity:0; }
#contact-02 { text-align: center; }

#icon-alustil { /*border: 1px solid #888888;*/ background-color:rgba(25,25,25,1); text-align: center; display: block; font-family: 'geosanslightregular' !important; letter-spacing: 2px !important; -webkit-text-stroke: 0.3px; text-transform: uppercase; line-height: 130px; width: 130px; height: 130px; border-radius: 150px;  }
#icon-alustil span { display: inline-block; vertical-align: middle; line-height: normal;   }
#contact-02 a { color: #888888 !important; }
#contact-02 a:hover { color: #fff !important; }

#contact-03 a { color: #ffffff !important; }

#contact-04 { margin: 0 auto; width: 50%; }
#contact-04 .ut-one-half { width: 50%; }



/*----------------------------------------
Additional CSS - Laptop
----------------------------------------*/


@media screen and (min-width: 1025px) and (max-width: 1280px) {

#begin { padding-top: 80px !important; padding-bottom: 60px !important; }

#begin-01 iframe { margin-top: 0px; }

#begin-02 { padding-top: 0px; padding-bottom: 0px; }

#innovation { padding-top: 80px !important; padding-bottom: 60px !important; }

#innovation-01 { padding-top: 0px; padding-bottom: 0px; }




}




/*----------------------------------------
Additional CSS - iPad Landscape
----------------------------------------*/


@media screen and (min-width: 769px) and (max-width: 1024px) {

.ha-header-front .tablet-grid-80 { width: 40%; }
.ha-header-front .hide-on-tablet { display: inline !important; } 

.ut-mm-trigger { display: none; }

.parallax-overlay-pattern { background-image: none !important; }


#begin { padding-top: 80px !important; padding-bottom: 60px !important; }

#begin-01 iframe { margin-top: 0px; }

#begin-02 { padding-top: 0px; padding-bottom: 0px; }
#begin-02 img { width: 45%; height: auto; }

#innovation { padding-top: 80px !important; padding-bottom: 60px !important; }

#innovation-01 { padding-top: 0px; padding-bottom: 0px; }

#icon-alustil { line-height: 98px; width: 98px; height: 98px; font-size: 12px; }



}



/*----------------------------------------
Additional CSS - iPad Portrait
----------------------------------------*/

@media screen and (max-width: 959px) {


#box-content { width: 560px; }

.ut-one-half { /*margin-bottom: 20px;*/ }

#begin .ut-one-half { width: 100%; }
#begin-01 { width: 80%; margin: 20px auto 60px; min-height: 0; }
#begin-01 iframe { margin-top: 0; }
#begin-02 { width: 560px; margin: 0 auto; }

#innovation-01 { width: 100%; }
#innovation-02 { width: 100%; }

.ut-portfolio-item-container .ut-masonry.gutter { width: 165px !important; margin-right: 10px; margin-left: 10px; }
.ut-portfolio-item-container .ut-masonry.gutter.last { margin-right: 10px; }

#contact-02 { width: 50%; }
#contact-02 .ut-one-fourth { width:45%; }

#contact-04 { width: 80%; }



}






/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Additional CSS - iPhone Horizontal
~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

@media screen and (max-width: 767px) {


#box-content { width: 420px; }

#begin-02 { width: 420px; }
#begin-02 img { width: 45%; height: auto; }

#innovation-02 { width: 360px; }

.ut-portfolio-item-container .ut-masonry.gutter { width: 100px !important; margin-right: 10px; margin-left: 10px; }

#icon-alustil { line-height: 98px; width: 98px; height: 98px; font-size: 12px; }

#box-content h1 { font-size: 14px; }
#box-content h2 { font-size: 18px; }


#my-homeslider { width: 60%; height: 60px; padding: 15px; margin-top: -50px; }
#my-homeslider img { height:30px; width: auto; }

#my-logo { height: 60px; padding: 5px; margin-top: -50px; }
#my-logo img { height: 50px; width: auto; }

#contact-04 { width: 100%; }





}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Additional CSS - iPhone Portrait
~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/	

@media screen and (max-width: 400px) {


#box-content { width: 280px; }

#begin-02 { width: 280px; }
#begin-02 img { width: 35%; height: auto; }
#begin-02 .ut-nav-tabs li { width: 120px; }
#begin-02 .ut-nav-tabs li a { font-size: 9px; padding: 4px 8px; }

#innovation-01 p { text-align: left; }
#innovation-02 { width: 280px; }

.ut-portfolio-item-container .ut-masonry.gutter { width: 120px !important; margin-right: 10px; margin-left: 10px; }

#icon-alustil { line-height: 110px; width: 110px; height: 110px; font-size: 14px; margin: 0 auto; }

#box-content h1 { font-size: 14px; }
#box-content h2 { font-size: 18px; }

#contact .ut-one-half { width: 100%; }
#contact-01 { display: none; }
#contact-02 { width: 100%; }

#my-homeslider { width: 90%; height: 90px; padding: 25px; margin-top: 0px; }
#my-homeslider img { height:40px; width: auto; }

#my-logo { height: 90px; margin-top: 0px; padding: 15px 8px; }
#my-logo img { height: 60px; width: auto; }

#contact-04 { width: 100%; }






}