@font-face { font-family: 'Troy';
                src: url('../Content/Fonts/Troy.eot');
                src: url('../Content/Fonts/Troy.eot?#iefix') format('embedded-opentype'), 
                     url('../Content/Fonts/Troy.woff') format('woff'), 
                     url('../Content/Fonts/Troy.ttf') format('truetype'), 
                     url('../Content/Fonts/Troy.svg#Troy') format('svg');}

@font-face { font-family: 'Poiret One';
                src: url('../Content/Fonts/PoiretOne-Regular.eot');
                src: url('../Content/Fonts/PoiretOne-Regular.eot?#iefix') format('embedded-opentype'), 
                     url('../Content/Fonts/PoiretOne-Regular.woff') format('woff'), 
                     url('../Content/Fonts/PoiretOne-Regular.ttf') format('truetype'), 
                     url('../Content/Fonts/PoiretOne-Regular.svg#PoiretOne-Regular') format('svg');}

@import url('http://fonts.googleapis.com/css?family=Poiret+One|Roboto:400,300,400italic,500,500italic&subset=latin,latin-ext,vietnamese');

body { font-size: 12px;  font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif; color: #232323; background-color: #fff; margin: 0; padding: 0; line-height: 1; }
header, footer, nav, section, h1, h2, h3, h4, h5, h6, p, span { display: block; margin: 0; padding: 0; }
.pattern01 { background: url(Content/Visuals/bgPattern01.png) repeat scroll 0% 0% transparent; position: absolute; width: 100%; z-index: -40;  }
.pattern02 { background: url(Content/Visuals/bgPattern02.png) repeat scroll 0% 0% transparent; position: absolute; width: 100%; z-index: -40; opacity: 0.5; filter:alpha(opacity=50); }
.overlay { position: absolute; width: 100%; background-color: rgba(0, 0, 0, 0.3); z-index: -40; }

h1 { float: left; width: 347px; height: 187px; background-image: url(Content/Visuals/Logo.png); margin-top: 100px;  }
h2 { float: left; width: 256px; height: 46px; background-image: url(Content/Visuals/LogoMin.png);  }
h3 { float: left; font-family: 'Poiret One', Helvetica, Arial, sans-serif; font-size: 75px; font-weight: normal; color: #676e76; }
h3 > i { font-size: 22px; font-style: normal; }
h4 { float: left;  width: 100%; font-family: 'Poiret One', Helvetica, Arial, sans-serif; font-size: 55px; font-weight: normal; color: #676e76; }
h5 { float: left;  height: 16px; font-size: 16px; font-weight: bold;   }
h6 { float: left;   font-size: 12px; font-weight: bold;   }
h7 {   font-size: 22px;    }
.base { float: left; width: 100%;   }
.page { margin: 0 auto; width: 95%; z-index: 10; margin-top: 68px; max-width: 1280px; }
.page3 { margin: 0 auto; width: 85%; z-index: 10; margin-top: 68px; max-width: 1280px; }
.page2 { margin: 0 auto; width: 100%; z-index: 10; margin-top: 50px;  max-width: 1280px;  }
.page2-middle { margin: 0 auto; width: 85%; z-index: 10; max-width: 1000px; }
.page-middle { margin: 0 auto; width: 85%; z-index: 10; max-width: 1000px; }
.move { position: absolute; right: 40px; font-family: 'Troy'; text-align: center; font-size: 50px; cursor: pointer; color: #fff; bottom: 30px; }
.header { float: left; width: 100%; padding: 40px 0; overflow: hidden; }
.headermsg { float: right; width: 50%; font-family: 'Roboto', Helvetica, Arial, sans-serif; font-size: 17px; margin-top: 20px; line-height: 22px; text-align: right; color: #979797; overflow: hidden; }
.detay {font-size: 14px; overflow: hidden; font-family: Arial, Helvetica, Sans-Serif; color: #232323; background-color: #fff; margin-top: 20px;  line-height: 2;}
.detay2 {font-size: 14px; overflow: hidden; font-family: Arial, Helvetica, Sans-Serif; color: #232323; background-color: #fff; margin-top: 20px;  line-height: 16px;}

.hide1 {
display:inline;
}

.hide2 {
display:none;
}


.col-48 { float: left; width: 47%; }
.col-50 { float: left; width: 49%; }
.colx-50 { float: left; width: 50%;  padding-top: 20px; padding-right: 10px;}
.colrx-50 { float: right; width: 50%;  padding-top: 20px; }
.col-60 { float: left; width: 890px;  padding-right: 20px;  }
.col-40 { float: left; width: 380px; }

.col-100 { float: left; width: 100%; }

.right { float: right; }
.left { float: left; }
.text-right { text-align: right; }

.mainpage > .page { margin-top: 0px; }
.hidden { display: none; }

.baslikfon {  display: block; float: left; width: 100%; height: 250px; margin-bottom:20px; margin: 0px 0 -40px 0; }
.baslikfon > .image { position: absolute; width: 100%; height: 450px; z-index: -40; background-size: 100% auto !important; }

.middle { float: left; width: 100%; height: 450px; margin: 0px 0 -40px 0; }
.middle > .pattern01 { height: 450px; }
.middle > .pattern02 { height: 450px; }
.middle > .overlay { height: 450px; }
.middle > .image { position: absolute; width: 100%; height: 450px; z-index: -40; background-size: 100% auto !important; }
.middle > .image2 { position: absolute; width: 100%; height: 300px; z-index: -40; background-size: 100% auto !important; }

.middle2 { float: left; width: 100%; height: 350px; margin: 30px 0 -40px 0; }
.middle2 > .pattern01 { height: 350px; }
.middle2 > .pattern02 { height: 350px; }
.middle2 > .overlay { height: 350px; }
.middle2 > .image { position: absolute; width: 100%; height: 350px; z-index: -40; background-size: 100% auto !important; }
.middle2 > .page-middle .caption { float: left; width: 100%; margin: 10px; color: #fff; font-family: Arial; font-size: 14px; border-bottom: 1px dotted #fff; padding-bottom: 8px; margin-bottom: 8px; }
.middle2 > .page-middle .caption > i { font-style: normal; font-family: 'Troy'; margin-right: 10px; font-size: 30px; }
.middle2 > .page-middle > .col-50{ margin-right: 10px; }

.middle2 > .page-middle .caption { float: left; width: 100%; margin: 10px; color: #fff; font-family: Arial; font-size: 14px; border-bottom: 1px dotted #fff; padding-bottom: 8px; margin-bottom: 8px; }
.middle2 > .page-middle .caption > i { font-style: normal; font-family: 'Troy'; margin-right: 10px; font-size: 30px; }
.middle2 > .page-middle > .col-50{ margin-right: 10px; }
.middle2 > .page-middle > .col-60{ margin-right: 10px; }
.middle2 > .page-middle > .col-40{ margin-right: 10px; }

.middle > .page-middle .caption { float: left; width: 100%; margin: 10px; color: #fff; font-family: Arial; font-size: 14px; border-bottom: 1px dotted #fff; padding-bottom: 8px; margin-bottom: 8px; }
.middle > .page-middle .caption > i { font-style: normal; font-family: 'Troy'; margin-right: 10px; font-size: 30px; }
.middle > .page-middle > .col-50{ margin-right: 10px; }
.middle > .page-middle > .col-60{ margin-right: 10px; }
.middle > .page-middle > .col-40{ margin-right: 10px; }

.leftmenu { float: left; position: fixed; font-family: 'Troy'; cursor: pointer; color: #e6e6e6; top: 18px; left: 20px; font-size: 8px; z-index: 99999; }

#googlemap { float:left; position: absolute; width: 100%;  }

/* Login Page
------------------------------------------------------------------ */
#login { float: left; position: absolute; width: 100%; height: 5000px; background-color: #000; z-index: 999999;  }
#login > .page { text-align: center; padding-top: 80px; }
#login > .page > .loading { margin-top: 100px; }

/* Top Menu
------------------------------------------------------------------ */
#topmenu { float: left; width: 100%; box-shadow: 2px 0px 2px rgba(0, 0, 0, 0.3); height: 75px; z-index: 999; top: 0; background: url(Content/Visuals/bgPattern01.png) repeat scroll 0% 0% transparent; background-color: #666; }
#topmenu > .page { margin-top: 0;  }
#topmenu > .page > h2 { float: left; width: 256px; height: 46px; margin: 10px 0; background-image: url(Content/Visuals/LogoMinWhite.png); }
#topmenu > .page > ul { float: right; margin: 0; padding: 0; text-align: right; z-index: 10; }
#topmenu > .page > ul > li {float: left;  color: #f2f2f2; height: 38px; font-weight: bold; padding:0; border-right: 1px solid transparent; border-left: 1px solid transparent; cursor: pointer; list-style-type: none; font-family: Helvetica, Arial, sans-serif ; font-size: 14px; }
#topmenu > .page > ul > li > a {
                   
					border: solid 1px transparent;
					color: inherit;
					display: block;
					line-height: 1em;
					
					font-weight: bold;
            	     padding: 30px 0px 30px 20px;
					text-decoration: none;
					
				}
#topmenu > .page > ul > li.active { color: #5d5d5d; border-bottom: 2px solid #f2f2f2; text-decoration: none; font-weight: bold;
                  }


#topmenu > .page > ul > li.hover { color: #727272;  text-decoration: none; font-weight: bold; background-color:#f1f1f1; height:75px;
                     }
#topmenu > .page > ul > li:last-child { margin-right: 20px; }
#topmenu > .page > ul.short { display: none; }
#topmenu > .page > .lang { position:absolute; top: 40px; right: 20px; color: #e6e6e6; font-size: 14px; font-weight: bold; }
#topmenu > .page > .lang > a { color: #e6e6e6; text-decoration: none; }

/* POP Menu
--------------------------------------------------------------------------------------------------------------------------- */
.popmenu { position: absolute; background-color: #f1f1f1; display: none; z-index: 999;}
.popmenu.active { display: block; }
.popmenu > ul { float: left; width: 250px; margin: 0; padding: 10px;  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);}
.popmenu > ul > li { float: left; margin: 5px 10px 5px 10px; width: 100%; font-family: Arial; font-size: 13px; color: #5d5d5d; cursor: pointer; }
.popmenu > ul > li > a { color: #5d5d5d; text-decoration: none;  }
.popmenu > ul > li > ul { float: left; margin: 10px 20px 0 0px; width: 80%; padding: 0; font-family: Arial; font-size: 13px; color: #5d5d5d; cursor: pointer; }
.popmenu > ul > li > ul > li { float: left; margin: 2px 0 2px 10px; width: 100%; font-family: Arial; font-size: 13px; color: #5d5d5d; cursor: pointer; }
.popmenu > ul > li > ul > li > a { color: #5d5d5d; text-decoration: none; }

/* Left Menu
--------------------------------------------------------------------------------------------------------------------------- */
#leftmenu { position: fixed; width: 300px; height: 400px; top: 0; left: 0; z-index: 99999; box-shadow: 2px -2px 2px rgba(0, 0, 0, 0.5); margin-left: -335px; background: url(Content/Visuals/bgPattern01.png) repeat scroll 0% 0% transparent; background-color: #666;}
#leftmenu span.close { float: right; font-family: 'Troy'; color: #fff; margin: 5px 10px 0 0; font-size: 18px; color: #e6e6e6; cursor: pointer; }
#leftmenu > img { float: left; margin: 30px 0 40px 30px }
#leftmenu > ul { float: left; width: 100%; margin: 0 0 0 20px; padding: 0; }
#leftmenu > ul > li { float: left; width: 230px; margin: 4px 15px; cursor: pointer; color: #fff; font-family: Arial; padding: 5px 0; font-size: 14px; font-weight: bold; border-bottom: 1px dotted #cfcfcf; }
#leftmenu > ul > li > ul { margin: 10px 0 0 10px; padding: 0;  }
#leftmenu > ul > li > ul > li { font-weight: normal; font-size: 13px; padding: 4px 0; }
#leftmenu > ul > li > ul > li > a { color: #fff; text-decoration: none; }
#leftmenu > ul > li > ul > li > ul { margin: 10px 0 0 10px; padding: 0;  }
#leftmenu > ul > li > ul > li > ul > li { font-weight: normal; font-size: 13px; padding: 2px 0; }
#leftmenu > ul > li > ul > li > ul > li > a { font-weight: normal; color: #fff; text-decoration: none; font-size: 13px; padding: 2px 0; }


/* Slider Text
--------------------------------------------------------------------------------------------------------------------------- */
.slider-text { float: left; width: 100%; overflow: hidden; margin: 70px 0 0 0; height: 150px; }
.slider-text > ul { float: left; width: 100%; margin: 0; padding: 0; }
.slider-text > ul > li { float: left; color: #fff; list-style: none; font-size: 60px; font-family: 'Poiret One', Helvetica, Arial, sans-serif; }

/* Slider Blur
--------------------------------------------------------------------------------------------------------------------------- */
.slider-blur { float: left; width: 100%; height: 200px; margin-bottom: 20px; position: relative; }
.slider-blur > ul { float: left; padding: 0; margin: 0; list-style: none;  }
.slider-blur > ul > li {float: left; width: 100%; display: none; text-align: center; }
.slider-blur > ul > li.active { display: block; }
.slider-blur > ul > li > img { position: absolute; cursor: zoom-in; }

/* Time Line
--------------------------------------------------------------------------------------------------------------------------- */
.timeline { width: 100%; height: 0px; overflow: hidden; margin: 0; min-width: 500px; max-width: 500px; min-height: 430px; position: relative; background: url('Content/Visuals/timelineDot.png') 6px top repeat-y; }
.timeline > ul.dates { float: left; overflow: no-content; float: left; list-style: none; margin: 0; padding: 0; } 
.timeline > ul.dates > li { list-style: none; width: 100px; height: 70px; font-size: 16px; color: #a9a9a9;  cursor: pointer; font-family: 'Poiret One', Helvetica, Arial, sans-serif; font-weight: 400;line-height: 18px; padding-left: 15px; background: url('Content/Visuals/timelineBiggerdot.png') 3px center no-repeat; padding-top: 50px; }
.timeline > ul.dates > li > a { font-size: 12px; font-style: normal; font-family: Arial; color: #bdbdbd; }
.timeline > ul.dates > li.selected { font-size: 22px; color: #000; font-weight: bold; background: url('Content/Visuals/timelineHigherdot.png') 1px center no-repeat; }
.timeline > ul.dates > li.selected > a { font-weight: normal; color: #666; }
.timeline > ul.issues { float: left; width: 73%; margin: 0; padding: 0; height: 500px; overflow: hidden; float: right; }	
.timeline > ul.issues > li { float: left; width: 100%; list-style: none; height: 500px;  padding: 0; margin: 0; }
.timeline > ul.issues > li > h5 { float: left; width: 100%; color: #333; font-weight: normal; font-size: 18px; text-align: center; font-family: Arial; margin: 40px 0 20px; }
.timeline > ul.issues > li > .image { float: left; width: 100%; cursor: zoom-in; height: 225px; text-align: center; }
.timeline > ul.issues > li > .image > img { margin: 0 auto; max-width: 370px; max-height: 225px; width: 100%; height: 225px; -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); zoom: 1; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; -webkit-transform: scale(0.7,0.7); -moz-transform: scale(0.7,0.7); -o-transform: scale(0.7,0.7); -ms-transform: scale(0.7,0.7); transform: scale(0.7,0.7); }
.timeline > ul.issues > li.selected > .image > img { max-width: 370px; max-height: 225px; -webkit-transform: scale(1.0,1.0); -moz-transform: scale(1.0,1.0); -o-transform: scale(1.0,1.0); -ms-transform: scale(1.0,1.0); transform: scale(1.0,1.0); }
.timeline > ul.issues > li > .text { float: left; width: 100%; margin-top: 20px; position: relative; overflow: hidden; }
.timeline > ul.issues > li > .text > p { float: left; font-size: 13px; color: #676e76; line-height: 19px; font-family: Helvetica, Arial, sans-serif; padding-right: 15px; }
.timeline > .next, .prev { position: absolute; color: #c5c5c5; cursor: pointer; width: 20px; height: 22px; overflow: hidden; font-family: 'Troy'; font-size: 20px;  }
.timeline > .next { top: 0; left: 93%; }
.timeline > .next:hover { color: #666; }
.timeline > .next:after { content: "F"; }
.timeline > .prev { top: 0; left: 88%; }
.timeline > .prev:hover { color: #666; }
.timeline > .prev:after { content: "W"; }

/* Scroll Text
------------------------------------------------------------------ */
.scrolltext { float: left; width: 100%; margin: 0; position: relative; overflow: hidden; }
.scrolltext > p { float: left; font-family: Helvetica, Arial, sans-serif; font-size: 13px; color: #676e76; line-height: 18px; padding: 0px 20px 8px 0px; }

/* Socials
------------------------------------------------------------------ */
#socials { float: left; width: 100%; height: 350px; margin: 30px 0 -40px 0; }
#socials > .pattern01 { height: 350px; }
#socials > .pattern02 { height: 350px; }
#socials > .overlay { height: 350px; }
#socials > .image { position: absolute; width: 100%; height: 350px; z-index: -40; background-size: cover; }
#socials > .page-middle .caption { float: left; width: 100%; margin: 10px; color: #fff; font-family: Arial; font-size: 14px; border-bottom: 1px dotted #fff; padding-bottom: 8px; margin-bottom: 8px; }
#socials > .page-middle .caption > i { font-style: normal; font-family: 'Troy'; margin-right: 10px; font-size: 30px; }
#socials > .page-middle > .col-50{ margin-right: 10px; }
#socials > .page-middle > .col-60{ margin-right: 10px; }
#socials > .page-middle > .col-40{ margin-right: 10px; }
/* Catalog
------------------------------------------------------------------ */
.catalog { float: left; width: 100%; padding-top: 10px; }
.catalog > span { float: left; font-size: 13px; width: 100%; border-bottom: 1px solid #d3d3d3; padding-bottom: 5px; margin-bottom: 8px; font-weight: bold; color: #676e76; }
.catalog > a { float: left; text-decoration: underline; margin-right: 10px; color: #4773b7; line-height: 18px; }

/* Contact Form
------------------------------------------------------------------ */
.contact-form { float: left; position: relative; width: 350px; height: 500px; margin-top: 20px; background-color: #fff; border: 1px solid #5d5d5d; padding: 20px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4); z-index: 555; }
.contact-form > span.caption { float: left; width: 100%; font-family: Arial; font-size: 18px; color: #5d5d5d; font-weight: bold; margin-bottom: 20px; }
.contact-form > ul { float: left; width: 100%; margin: 0; padding: 0; list-style-type: none; margin-top: 20px; }
.contact-form > ul > li { float: left; width: 100%; color: #666; font-family: 'Roboto', Helvetica, Arial, sans-serif; font-size: 12px; line-height: 19px; margin-bottom: 5px; }
.contact-form > ul > li > i {  float: left; font-style: normal; font-family: 'Troy'; font-size: 18px; margin: -2px 15px 0 0; line-height: 19px;  }
.contact-form > .form { float: left; width: 100%; border-top: 1px dotted #666; padding: 10px 0; margin-top: 10px; }
.contact-form > .form > input[type=text] { float: left; width: 97.5%; border: 1px solid #ccc; padding: 4px; margin-bottom: 5px; border-radius: 3px; }
.contact-form > .form > textarea { float: left; width: 97.5%; font-family: Arial; height: 80px; border: 1px solid #ccc; padding: 4px; border-radius: 3px; }
.contact-form > .form > .button { float: left; width: 100%; border: none; cursor: pointer; background-color: #555; color: #fff; text-align: center; padding: 10px 0; border-radius: 3px; margin-top: 15px; }
.contact-form > .form > .button:hover { background-color: #333;  }


/* Arama Form
------------------------------------------------------------------ */
.arama-form { float: right; position: relative; width: 350px; height: 300px; margin-top: 0px; background-color: #ffcc00; border: 1px solid #5d5d5d; padding: 20px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4); z-index: 555; }
.arama-form > span.caption { float: left; width: 100%; font-family: Arial; font-size: 18px; color: #5d5d5d; font-weight: bold; margin-bottom: 20px; }
.arama-form > ul { float: left; width: 100%; margin: 0; padding: 0; list-style-type: none; margin-top: 20px; }
.arama-form > ul > li { float: left; width: 100%; color: #666; font-family: 'Roboto', Helvetica, Arial, sans-serif; font-size: 12px; line-height: 19px; margin-bottom: 5px; }
.arama-form > ul > li > i {  float: left; font-style: normal; font-family: 'Troy'; font-size: 18px; margin: -2px 15px 0 0; line-height: 19px;  }
.arama-form > .form { float: left; width: 100%; border-top: 1px dotted #666; padding: 10px 0; margin-top: 10px; }
.arama-form > .form > input[type=text] { float: left; width: 97.5%; border: 1px solid #ccc; padding: 4px; margin-bottom: 5px; border-radius: 3px; }
.arama-form > .form > select { float: left; width: 97.5%; border: 1px solid #ccc; padding: 4px; margin-bottom: 5px; border-radius: 3px; }
.arama-form > .form > textarea { float: left; width: 97.5%; font-family: Arial; height: 80px; border: 1px solid #ccc; padding: 4px; border-radius: 3px; }
.arama-form > .form > .button { float: left; width: 100%; border: none; cursor: pointer; background-color: #555; color: #fff; text-align: center; padding: 5px 0; border-radius: 3px; margin-top: 15px; }
.arama-form > .form > .button:hover { background-color: #333;  }

.arama-form2 { float: right; position: relative; width: 500px; height: 180px; margin-top: 0px; margin-bottom: 20px; background-color: #fff; border: 1px solid #5d5d5d; padding: 20px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4); z-index: 555; }
.arama-form2 > span.caption { float: left; width: 100%; font-family: Arial; font-size: 18px; color: #5d5d5d; font-weight: bold; margin-bottom: 5px; }
.arama-form2 > ul { float: left; width: 100%; margin: 0; padding: 0; list-style-type: none; margin-top: 20px; }
.arama-form2 > ul > li { float: left; width: 100%; color: #666; font-family: 'Roboto', Helvetica, Arial, sans-serif; font-size: 12px; line-height: 19px; margin-bottom: 5px; }
.arama-form2 > ul > li > i {  float: left; font-style: normal; font-family: 'Troy'; font-size: 18px; margin: -2px 15px 0 0; line-height: 19px;  }
.arama-form2 > .form { float: left; width: 100%; border-top: 1px dotted #666; padding: 10px 0; margin-top: 10px; }
.arama-form2 > .form > input[type=text] { float: left; width: 20.5%; border: 1px solid #ccc; padding: 4px; margin-bottom: 5px; margin-right: 5px; border-radius: 3px; }
.arama-form2 > .form > select { float: left; width: 20.5%; border: 1px solid #ccc; padding: 4px; margin-bottom: 5px; margin-right: 5px; border-radius: 3px; }
.arama-form2 > .form > textarea { float: left; width: 20.5%; font-family: Arial; height: 80px; border: 1px solid #ccc; padding: 4px; margin-right: 5px; border-radius: 3px; }
.arama-form2 > .form > .button { float: left; width: 88%; border: none; cursor: pointer; background-color: #555; color: #fff; text-align: center; padding: 10px 0; border-radius: 3px; margin-top: 15px; }
.arama-form2 > .form > .button:hover { background-color: #333;  }

.arama-form3 { float: right; position: relative; width: 500px; height: 280px; margin-top: 20px; margin-bottom: 20px; background-color: #fff; border: 1px solid #5d5d5d; padding: 20px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4); z-index: 555; }
.arama-form3 > span.caption { float: left; width: 100%; font-family: Arial; font-size: 18px; color: #5d5d5d; font-weight: bold; margin-bottom: 5px; }
.arama-form3 > ul { float: left; width: 100%; margin: 0; padding: 0; list-style-type: none; margin-top: 20px; }
.arama-form3 > ul > li { float: left; width: 100%; color: #666; font-family: 'Roboto', Helvetica, Arial, sans-serif; font-size: 12px; line-height: 19px; margin-bottom: 5px; }
.arama-form3 > ul > li > i {  float: left; font-style: normal; font-family: 'Troy'; font-size: 18px; margin: -2px 15px 0 0; line-height: 19px;  }
.arama-form3 > .form { float: left; width: 100%; border-top: 1px dotted #666; padding: 10px 0; margin-top: 10px; }
.arama-form3 > .form > input[type=text] { float: left; width: 20.5%; border: 1px solid #ccc; padding: 4px; margin-bottom: 5px; margin-right: 5px; border-radius: 3px; }
.arama-form3 > .form > select { float: left; width: 20.5%; border: 1px solid #ccc; padding: 4px; margin-bottom: 5px; margin-right: 5px; border-radius: 3px; }
.arama-form3 > .form > textarea { float: left; width: 20.5%; font-family: Arial; height: 80px; border: 1px solid #ccc; padding: 4px; margin-right: 5px; border-radius: 3px; }
.arama-form3 > .form > .button { float: left; width: 88%; border: none; cursor: pointer; background-color: #555; color: #fff; text-align: center; padding: 10px 0; border-radius: 3px; margin-top: 15px; }
.arama-form3 > .form > .button:hover { background-color: #333;  }
/* ProTop
------------------------------------------------------------------ */
#protop { float: left; width: 100%; margin: 0; padding: 0; list-style-type: none; border: 1px solid #ccc; }
#protop > li { float: left; padding: 8px 20px; font-size: 14px; cursor: pointer; }
#protop > li.active { background-color: #222; color: #fff; }
#protop > li:hover { background-color: #f1f1f1; color: #000; }

/* ProMain
------------------------------------------------------------------ */
#promain { float: left; width: 100%; height: 500px; border: 1px solid #ccc; border-top: none; }
#promain > .nav { float: left; width: 15%; background-color: #f1f1f1;height: 480px; padding: 10px; margin-right: 10px; border-right: 1px solid #cecece; }
#promain > .nav > ul { float: left; width: 100%; margin: 0px; padding: 0px; list-style-type: none; }
#promain > .nav > ul > li { float: left; width: 100%; color: #666; padding: 8px 0; border-bottom: 1px solid #cecece; cursor: pointer; }
#promain > .nav > ul > li:hover { text-decoration: underline; }
#promain > .nav > ul > li.active { color: #000; font-weight: bold; }
#promain > .list { float: left; width: 70%; margin: 10px; height: 480px; overflow: auto; }
#promain > .list > ul { float: left; width: 100%; margin: 0; padding: 0; list-style-type: none; }
#promain > .list > ul > li { float: left; width: 23%; margin: 0 0 20px 10px; height: 240px; }
#promain > .list > ul > li > .image { float: left; width: 100%; height: 200px; margin-bottom: 10px; }
#promain > .list > ul > li > .image > img { float: left; width: 100%; height: 100% !important; }
#promain > .list > ul > li > span { float: left; width: 100%; text-align: center; }
#promain > .list > ul > li > span > i { font-size: 10px; font-weight: normal; font-style: normal; margin: 5px 0 0 -5px;  }

/* Footer
--------------------------------------------------------------------------------------------------------------------------- */
footer { float: left; width: 100%; height: 80px; background: url(Content/Visuals/bgPattern01.png) repeat scroll 0% 0% transparent;  background-color: #666; }
footer > .page { margin-top: 20px; }
footer > .page > .social { float: left; width: 10%; margin-top: -10px; }
footer > .page > .social > a { font-family: 'Troy'; color: #fff; font-size: 30px; text-decoration: none; margin-right: 15px; }
footer > .page > .social > a.twitter { float: left; }
footer > .page > .social > a.instagram { float: left; margin-top: 1px; }
footer > .page > .copy { float: right; width: 90%; text-align: right; margin: 5px 0; color: #ededed; }


/* Slide Project
--------------------------------------------------------------------------------------------------------------------------- */
ul.slide-project { float: left; width: 100%; margin: 0; padding: 0; list-style-type: none; }
ul.slide-project > li { float: left; width: 25%; overflow: hidden; }
ul.slide-project > li > a { float: left; width: 100%; height: 100%; cursor: pointer; position: relative;  }
ul.slide-project > li > a > .image { float: left; width: 100%; height: 100%; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
ul.slide-project > li > a > .poverlay { position: absolute; width: 100%; height: 100%; background: #fff; color: #666; top: 0; left: 0; opacity: 0; text-align: center; padding: 30px 0; -moz-transform: scale(0.1); -ms-transform: scale(0.1); -webkit-transform: scale(0.1); transform: scale(0.1); }
ul.slide-project > li > a:hover > .image { -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; -moz-transform: rotate(-5deg) scale(1.3); -ms-transform: rotate(-5deg) scale(1.3); -webkit-transform: rotate(-5deg) scale(1.3); transform: rotate(-5deg) scale(1.3); }
ul.slide-project > li > a:hover > .poverlay { opacity: 0.8; -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
ul.slide-project > li > a > .poverlay > span { float: left; width: 100%; font-family: Arial; font-size: 18px; font-weight: bold; color: #000; margin-bottom: 10px; text-align: center; }
ul.slide-project > li > a > .poverlay > p { float: left; width: 100%; font-family: Arial; font-size: 13px; color: #000; line-height: 18px; text-align: center; }

/* Slide Services
--------------------------------------------------------------------------------------------------------------------------- */
ul.slide-services { float: left; width: 100%; margin: 0; padding: 0; list-style-type: none; margin-bottom: 80px; }
ul.slide-services > li { float: left; width: 25%; height: 100% !important; overflow: hidden; }
ul.slide-services > li > .image { float: left; text-align: center; width: 100%; }
ul.slide-services > li > .image > img { width: 100%; height: 100% !important; -moz-transform: scale(0.5); -ms-transform: scale(0.5); -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear; }
ul.slide-services > li > .content { float: left; text-align: center; width: 100%; height: 150px; }
ul.slide-services > li > .content > span { float: left; width: 100%; text-align: center; margin: 10px 0; font-family: 'Roboto', Helvetica, Arial, sans-serif; font-size: 15px; color: #666; } 
ul.slide-services > li > .content > p { margin: 0 auto;  width: 90%; text-align: center; line-height: 18px; font-family: 'Roboto', Helvetica, Arial, sans-serif; font-size: 13px; color: #979797; } 
ul.slide-services > li:hover { background-color: #f2f2f2; }
ul.slide-services > li:hover > .image > img { -moz-transform: scale(0.8); -ms-transform: scale(0.8); -webkit-transform: scale(0.8); transform: scale(0.8); }
ul.slide-services > li:hover > .content > span { -webkit-animation: moveFromRight 400ms ease; -moz-animation: moveFromRight 400ms ease; -ms-animation: moveFromRight 400ms ease; }
ul.slide-services > li:hover > .content > p { -webkit-animation: moveFromBottom 400ms ease; -moz-animation: moveFromBottom 400ms ease; -ms-animation: moveFromBottom 400ms ease; }

.services-box { float: left; width: 100%; margin: 0 0 20px 0; padding: 0; }
.services-box > .image { float: left; width: 25%; text-align: center; }
.services-box > .image > img { opacity: 0.8; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
.services-box:hover > .image > img { opacity: 1; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
.services-box > .content { float: left; width: 72%; }
.services-box > .content > span { float: left; width: 100%; line-height: 28px; font-family: 'Roboto', Helvetica, Arial, sans-serif; font-size: 15px; color: #666; }
.services-box > .content > p { float: left; width: 100%; line-height: 18px; font-family: 'Roboto', Helvetica, Arial, sans-serif; font-size: 13px; color: #979797; }
.services-box.left > .image { float: right; }
.services-box.left > .content { text-align: right; }

/* Our Team
--------------------------------------------------------------------------------------------------------------------------- */

.teams {background-color: #f1f1f1; box-shadow: 0 0 3px rgba(0, 0, 0, 0.4); padding: 50px 0;}
.ourteam { float: left; width: 100%; }
.ourteam > ul { float: left; width: 100%; padding: 0; list-style-type: none; }
.ourteam > ul > li { float: left; width: 23.4%; height: 100% !important; padding-bottom: 20px; margin-right: 2%; background-color: #dedede; }
.ourteam > ul > li:last-child { margin-right: 0px; }
.ourteam > ul > li > .image { float: left; cursor: pointer; width: 100%; background-size: cover; background-position: 50% 0px; transition: transform 0.3s ease;  -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
.ourteam > ul > li > span.name { float: left; font-size: 16px; font-family: 'Roboto', Helvetica, Arial, sans-serif; width: 100%; text-align: center; margin: 15px 0; }
.ourteam > ul > li > span.position { float: left; font-size: 12px; font-family: 'Roboto', Helvetica, Arial, sans-serif; width: 100%; text-align: center; }

/* Overlay
---------------------------------------------------------------------------------------------*/
#overlay-lightbox { position: absolute; top:0; right:0; bottom:0; left:0; height: 100%; width:100%; margin:0; padding:0; display: none; z-index: 1110; background-color: rgba(0, 0, 0, 0.6); }

/* Lightbox
---------------------------------------------------------------------------------------------*/
#lightbox { position: absolute; display: none; width: 800px; height: 400px; background-color: #ffffff; z-index: 111; box-shadow: 0px 5px 15px rgba(0,0,0,0.3); border-radius: 5px; border: 1px solid rgba(0,0,0,0.8); padding: 10px; z-index: 1999; overflow: hidden; }
#lightbox em { position: absolute; margin-left: 430px; font-family: 'Troy'; font-style: normal; font-size: 24px; color: #d5d5d5; cursor: pointer; }
#lightbox em:hover { color: #555; }

/* Project
---------------------------------------------------------------------------------------------*/
#prevnext { float: left; width: 100%; height: 30px; margin: 40px 0 30px 0; }
#prevnext > .left { float: left; cursor: pointer; font-family: 'Troy'; font-size: 22px; color: #a9a9a9; }
#prevnext > .left:hover { color: #666; }
#prevnext > .right { float: right; cursor: pointer; font-family: 'Troy'; font-size: 22px; color: #a9a9a9; }
#prevnext > .right:hover { color: #666; }
#project { float: left; width: 100%; height: 390px; overflow: hidden; margin: 0px 0; }
#project > ul { float: left; width: 500%; height: 180px; margin: 0; padding: 0; list-style-type: none; }
#project > ul > li { float: left; width: 900px; margin: 0; padding: 0; list-style-type: none; }
#project > ul > li > .image { float: left; width: 570px; height: 350px; overflow: hidden; }
#project > ul > li > .image > .left { position: fixed; font-family: 'Troy'; font-size: 22px; margin-top: 150px; padding: 5px 7px 5px 5px; background-color: rgba(102, 102, 102, 0.6); cursor: pointer; color: #fff; }
#project > ul > li > .image > .left:hover { background-color: #666; }
#project > ul > li > .image > .right { position: fixed; font-family: 'Troy'; font-size: 22px; padding: 5px 5px 5px 7px; margin: 150px 0 0 540px; cursor: pointer; background-color: rgba(102, 102, 102, 0.6); color: #fff; }
#project > ul > li > .image > .right:hover { background-color: #666; }
#project > ul > li > .image > ul { float: left; width: 11570px; height: 350px; list-style-type: none; margin: 0; padding: 0; }
#project > ul > li > .image > ul > li { float: left; width: 570px; height: 350px;  }
#project > ul > li > .detail { float: right; width: 300px; height: 350px; }
#project > ul > li > .detail > .caption { float: left; width: 100%; color: #666; font-size: 16px; font-weight: bold; text-align: center; margin-bottom: 10px; border-bottom: 1px dotted #ddd; padding-bottom: 9px; }
#project > ul > li > .detail > .text { float: left; width: 100%; height: 140px; color: #666; font-size: 13px; margin-bottom: 10px; overflow: hidden; line-height: 20px; }
#project > ul > li > .detail > .captiondetail { float: left; width: 100%; color: #666; font-size: 16px; font-weight: bold; text-align: center; margin-bottom: 10px; border-bottom: 1px dotted #ddd; padding-bottom: 9px; }
#project > ul > li > .detail > .picturetext { float: left; width: 100%; height: 130px; color: #666; font-size: 13px; margin-bottom: 10px; overflow: hidden; }
#project > ul > li > .image .detail { float: left; width: 300px; height: 350px; margin-top: 10px; display: none; }
#project > ul > li > .image .detail > .caption { float: left; width: 100%; color: #666; font-size: 16px; font-weight: bold; text-align: center; margin-bottom: 10px; border-bottom: 1px dotted #ddd; padding-bottom: 9px; }
#project > ul > li > .image .detail > .text { float: left; width: 100%; height: 140px; color: #666; font-size: 13px; margin-bottom: 10px; overflow: hidden; line-height: 20px; }

/* IO Error
---------------------------------------------------------------------------------------------*/
.ioerror { position: absolute; display: none; padding: 4px 9px 4px 10px; cursor: pointer; background-color: #ffbaba; border-radius: 3px; border: 1px solid #da0e0e; z-index: 951;}
.ioerror span.text { float: left; font-family: Arial; color: #f30303; font-size: 12px; padding-top: 2px; margin-top: 2px;  }
.ioerror  span.arrow { width: 33px; height: 8px; overflow: hidden; position: absolute; top: 23px; left: 40px; }
.ioerror  span.arrow:after { background: #bb0b0b; left: 0px; border: 1px solid #bb0b0b; }
.ioerror  span.arrow:after { content: ""; position: absolute; left: 6px; top: -26px; width: 25px; height: 25px; box-shadow: 6px 5px 9px -9px black; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }

/* bwWrapper
---------------------------------------------------------------------------------------------*/
.bwWrapper { position:relative; display:block; }

@-webkit-keyframes moveFromLeft{ from { -webkit-transform: translateX(-100%); } to { -webkit-transform: translateX(0%); } }
@-moz-keyframes moveFromLeft{ from { -moz-transform: translateX(-100%); } to { -moz-transform: translateX(0%); } }
@-ms-keyframes moveFromLeft{ from { -ms-transform: translateX(-100%); } to { -ms-transform: translateX(0%); } }
@-webkit-keyframes moveFromRight { from { -webkit-transform: translateX(100%); } to { -webkit-transform: translateX(0%); } }
@-moz-keyframes moveFromRight { from { -moz-transform: translateX(100%); } to { -moz-transform: translateX(0%); } }
@-ms-keyframes moveFromRight { from { -ms-transform: translateX(100%); } to { -ms-transform: translateX(0%); } }
@-webkit-keyframes moveFromBottom { from { -webkit-transform: translateY(100%); } to { -webkit-transform: translateY(0%); } }
@-moz-keyframes moveFromBottom { from { -moz-transform: translateY(100%); } to { -moz-transform: translateY(0%); } }
@-ms-keyframes moveFromBottom { from { -ms-transform: translateY(100%); } to { -ms-transform: translateY(0%); } }

/* Overlay
---------------------------------------------------------------------------------------------*/
#overlay { position: absolute; top:0; right:0; bottom:0; left:0; height: 100%; width:100%; margin:0; padding:0; opacity:.4; filter: alpha(opacity=40); -moz-opacity: 0.4; display: none; z-index: 110; background-color: #000; }

/* Message Box
---------------------------------------------------------------------------------------------*/
#message-box { position: absolute; width: 400px; cursor: pointer; background-color: #ffffff; border-radius: 5px; display: none; z-index: 2121; box-shadow: 0px 0px 0px 8px rgba(0,0,0,0.3); padding: 20px; padding-top: 20px; }
#message-box .icon { float: left; padding-right: 30px; }
#message-box .content { font-family: Verdana ; font-size: 12px; line-height: 20px;  }
#message-box .content p { float: left;  text-align: center; margin: 0px; padding: 0px; }
#message-box .buttons { float: left; width: 100%;  margin-top: 15px; margin-bottom: 5px; text-align: center; margin-top: 30px; }
#message-box .buttons .button { border: none; padding: 6px 10px ; border-radius: 5px; min-width: 80px; background-color: #444; color: #ffffff; cursor: pointer; font-family: Verdana; font-size: 11px; font-weight: bold; margin-right: 5px; }
#message-box .buttons .button:hover { background-color: #222; }

/* Process Message
---------------------------------------------------------------------------------------------*/
#process-message { position: absolute; cursor: pointer; background-color: #ffffff; border-radius: 5px; display: none; z-index: 99; box-shadow: 0px 0px 0px 8px rgba(0,0,0,0.4); padding: 10px; }
#process-message p { float: left; text-align: center; margin: 0px; padding: 0px; font-family: Verdana; font-size: 12px;  }

/* Minimize
---------------------------------------------------------------------------------------------*/
h1.min { width: 95%; background-size: contain; background-repeat: no-repeat; }
#topmenu.min > .page > h2 { float: right; }
#topmenu.min > .page > ul { display: none; }
.slider-text > ul > li.min {font-size: 30px; }
h3.min { width: 50%; font-size: 40px; }
.headermsg.min { float: left; margin: 0; width: 50%; font-size: 15px; }
.col-50.min { width: 100%; }
.col-60.min { width: 100%; }
.col-40.min { width: 100%; }
.timeline.min { float: left; margin: 30px 0; width: 100%; min-width: 0px;  }
.timeline.min > ul.issues { float: left;  }
.timeline.min > .next { top: 0; left: 53%; }
.timeline.min > .prev { top: 0; left: 46%; }
.middle.min { height: 200px; }
.middle.min > .pattern01 { height: 200px; }
.middle.min > .pattern02 { height: 200px; }
.middle.min > .overlay { height: 200px; }
.middle.min > .image { height: 200px;  }


#socials.min > .page-middle > .col-50 { width: 100%; }
#socials.min > .page-middle > .col-60 { width: 100%; }
#socials.min > .page-middle > .col-40 { width: 100%; }
.ourteam.min > ul > li { width: 23%; margin-bottom: 10px; background-color: transparent;  }
.ourteam.min > ul > li > span.name { font-size: 15px; font-weight: bold; }
.ourteam.min > ul > li > span.position { font-size: 12px; }
ul.slide-services.min > li { width: 25%; }
ul.slide-services.min > li > .content { height: 160px; }
#promain.min > .list { width: 60%; }

ul.slide-project.min > li { float: left; width: 25%; overflow: hidden; }

#lightbox.min em { margin-left: 140px; }
.twitter.min { display: none; }

/* Minimize Phone
---------------------------------------------------------------------------------------------*/
h1.minphone { width: 95%; background-size: contain; background-repeat: no-repeat; }
#topmenu.minphone > .page > h2 { float: right; }
#topmenu.minphone > .page > ul { display: none; }
.slider-text > ul > li.minphone {font-size: 30px; }
h3.minphone { width: 50%; font-size: 25px; }
.headermsg.minphone { float: left; margin: 0; width: 50%; font-size: 11px; }
.col-50.minphone { width: 100%; }
.col-40.minphone { width: 100%; }
.col-60.minphone { width: 100%; }
.timeline.minphone { float: left; margin: 30px 0; background-image: none; width: 100%; min-width: 0px;  }
.timeline.minphone > ul.dates { display: none;}
.timeline.minphone > ul.issues { float: left; width: 100%; }
.timeline.minphone > .next { top: 0; left: 53%; }
.timeline.minphone > .prev { top: 0; left: 46%; }
.middle.minphone { height: 150px; }
.middle.minphone > .pattern01 { height: 150px; }
.middle.minphone > .pattern02 { height: 150px; }
.middle.minphone > .overlay { height: 150px; }
.middle.minphone > .image { height: 150px;  }
#socials.minphone > .page-middle > .col-50 { width: 100%; }
#socials.minphone > .page-middle > .col-40 { width: 100%; }
#socials.minphone > .page-middle > .col-60 { width: 100%; }
ul.slide-project.minphone > li { float: left; width: 50%; overflow: hidden; }
.ourteam.minphone > ul > li { width: 48%; margin-bottom: 10px; background-color: transparent;  }
.ourteam.minphone > ul > li > span.name { font-size: 15px; font-weight: bold; }
.ourteam.minphone > ul > li > span.position { font-size: 12px; }
ul.slide-services.minphone > li { width: 50%; }
ul.slide-services.minphone > li > .content { height: 160px; }
ul.slide-services.minphone > li > .content > span { font-size: 10px; }
ul.slide-services.minphone > li > .content > p { font-size: 10px; }
.services.minphone > .page > .col-48 { width: 100%; }
.services.minphone > .page > .col-48 > .services-box > .image > img { width: 50px; height: 50px; }
.contact-form.minphone { width: 230px; height: 480px; }
.arama-form.minphone { width: 230px; height: 480px; }
footer.minphone .copy { font-size: 10px; }
#promain.minphone > .list { width: 60%; }

#project > ul > li > .image.minphone { width: 300px;  }
#project > ul > li > .image.minphone img { width: 300px; }
#project > ul > li > .image.minphone > .right { margin: 150px 0 0 270px; }
#project > ul > li > .image.minphone .detail { display: block; }

#lightbox.minphone em { margin-left: 140px; }

#plastoframe.minphone > .left { width: 60px; } 
#plastoframe.minphone > .right { width: 40px; } 
#plastoframe.minphone > .middle { width: 200px; } 

#plastoframe { float: left; width: 100%;  }
#plastoframe > .top { float: left; width: 100%; margin-bottom: 20px; }
#plastoframe > .top > a { border:1px solid #b7b7b7; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:12px;font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-decoration:none; display:inline-block;text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF; background-color: #d3d3d3; background-image: -webkit-gradient(linear, left top, left bottom, from(#d3d3d3), to(#707070)); background-image: -webkit-linear-gradient(top, #d3d3d3, #707070); background-image: -moz-linear-gradient(top, #d3d3d3, #707070); background-image: -ms-linear-gradient(top, #d3d3d3, #707070); background-image: -o-linear-gradient(top, #d3d3d3, #707070); background-image: linear-gradient(to bottom, #d3d3d3, #707070);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#d3d3d3, endColorstr=#707070); }
#plastoframe > .top > a:hover{ border:1px solid #a0a0a0; background-color: #bababa; background-image: -webkit-gradient(linear, left top, left bottom, from(#bababa), to(#575757)); background-image: -webkit-linear-gradient(top, #bababa, #575757); background-image: -moz-linear-gradient(top, #bababa, #575757); background-image: -ms-linear-gradient(top, #bababa, #575757); background-image: -o-linear-gradient(top, #bababa, #575757); background-image: linear-gradient(to bottom, #bababa, #575757);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#bababa, endColorstr=#575757); }

#plastoframe > .left { float: left; width: 8%; height: 280px; background-image: url(../Uploads/BtnLeft.png); background-repeat: no-repeat; background-position: 10px 110px; cursor: pointer; }


#plastoframe > .middle { float: left; width: 84%; margin: 0; height: 280px; padding: 0; overflow: hidden; }
#plastoframe > .middle > ul { float: left; margin: 0; padding: 0; list-style-type: none; }
#plastoframe > .middle > ul > li { float: left; width: 180px; margin: 0 30px 10px 0; }
#plastoframe > .middle > ul > li > img { float: left; width: 100%; height: 100% !important;}

#plastoframe > .right { float: left; width: 8%; height: 280px; background-image: url(../Uploads/BtnRight.png); background-repeat: no-repeat; background-position: 20px 110px; cursor: pointer; }



/* Duyuru  CSS */
.ic_container{
    vertical-align:baseline;
    margin:0px;
    position:relative;
    /*-moz-border-radius:10px;
    -webkit-border-radius:10px;
    -khtml-border-radius:10px;
    -moz-box-shadow: 0 1px 3px #888;
    -webkit-box-shadow: 0 1px 3px #888;*/
}

.ic_caption{
    position:absolute;    
    opacity:0.6;   
    overflow:hidden;
    margin:0px;
    padding:0px;
    left:0px;
    right:0px;
    cursor:default;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
.ic_category{
    text-transform:uppercase;
    font-size:24px;
    letter-spacing:3px;
    padding:5px;
    margin:0px;
	color:#cbcbcb;
}
.ic_caption h3{
    padding:0px 5px 5px 5px;
    margin:0px;
    font-size:18px;
}
.ic_text{
    padding:5px;
    margin:0px;
    text-align:justify;
    font-size:16px;

}

* {box-sizing: border-box}

/* Container needed to position the overlay. Adjust the width as needed */
.container2 {
  position: relative;
  width: 100%;
 
}

/* Make the image to responsive */
.image {
  display: block;
  width: 95%;
  height: auto;
}
.img2 {
  display: block;
  width: 100%;
  height: 100%;
}

/* The overlay effect - lays on top of the container and over the image */
.overlayx {
  position: absolute;
  bottom: 0;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  color: #f1f1f1;
  width: 100%;
  transition: .5s ease;
  opacity:0;
  color: white;
  font-size: 14px;
  padding: 20px;
  text-align: left;
z-index:1;
}

/* When you mouse over the container, fade in the overlay title */
.container2:hover .overlayx {
  opacity: 1;
}

.carousel-taban{
 position: absolute;
  bottom: 0;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  color: #f1f1f1;
  width: 100%;
 padding-top:20px;
  opacity:1;

}
.carousel-taban2{
display:none;
  
}
.carousel-caption {
    max-width: 100%;
    width:100%;
color: white;
  font-size: 16px;
font-weight: bold;
 
  marging-bottom:20px;
  text-align: center;
    left: 0;
}
 
 

a.ic		{  color: #f4511e; font-size: 50px;}
a.ic:visited{color: #f4511e; font-size: 50px;}
a.ic:active	{ color: #f4511e; font-size: 50px;}
a.ic:hover	{ color: #ff9933; font-size: 50px;}

#ust-bosluk {
margin-bottom: 15px;
}
#ust-bosluk2 {
margin-bottom: 15px;
}

/* Arama Form MEdia*/
@media screen and (max-width:767px) {

.hide1 {
display:none;
}

.hide2 {
display:inline;
}
.arama-form { float: right; position: relative; width: 100%; height: 400px; margin-top: 0px;  background-color: #ffcc00; border: 1px solid #5d5d5d; padding: 20px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4); z-index: 555; }
.arama-form > span.caption { float: right; width: 90%; font-family: Arial; font-size: 18px; color: #5d5d5d; font-weight: bold; margin-bottom: 5px; }
.arama-form > ul { float: right; width: 90%; margin: 0; padding: 0; list-style-type: none; margin-top: 20px; }
.arama-form > ul > li { float: right; width: 90%; color: #666; font-family: 'Roboto', Helvetica, Arial, sans-serif; font-size: 12px; line-height: 19px; margin-bottom: 5px; }
.arama-form > ul > li > i {  float: right; font-style: normal; font-family: 'Troy'; font-size: 18px; margin: -2px 15px 0 0; line-height: 19px;  }
.arama-form > .form { float: right; width: 90%; border-top: 1px dotted #666; padding: 10px 0; margin-top: 10px; }
.arama-form > .form > input[type=text] { float: right; width: 90.5%; border: 1px solid #ccc; padding: 4px; margin-bottom: 5px; margin-right: 5px; border-radius: 3px; }
.arama-form > .form > select { float: right; width: 90.5%; border: 1px solid #ccc; padding: 4px; margin-bottom: 5px; margin-right: 5px; border-radius: 3px; }
.arama-form > .form > textarea { float: right; width: 90.5%; font-family: Arial; height: 80px; border: 1px solid #ccc; padding: 4px; margin-right: 5px; border-radius: 3px; }
.arama-form > .form > .button { float: left; width: 100%; border: none; cursor: pointer; background-color: #555; color: #fff; text-align: center; padding: 10px 0; border-radius: 3px; margin-top: 15px; }
.arama-form > .form > .button:hover { background-color: #333;  }

.arama-form2 { float: right; position: relative; width: 300px; height: 400px; margin-top: 0px;  background-color: #fff; border: 1px solid #5d5d5d; padding: 20px;  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4); z-index: 555; }
.arama-form2 > span.caption { float: left; width: 100%; font-family: Arial; font-size: 18px; color: #5d5d5d; font-weight: bold; margin-bottom: 5px; }
.arama-form2 > ul { float: left; width: 100%; margin: 0; padding: 0; list-style-type: none; margin-top: 20px; }
.arama-form2 > ul > li { float: left; width: 100%; color: #666; font-family: 'Roboto', Helvetica, Arial, sans-serif; font-size: 12px; line-height: 19px; margin-bottom: 5px; }
.arama-form2 > ul > li > i {  float: left; font-style: normal; font-family: 'Troy'; font-size: 18px; margin: -2px 15px 0 0; line-height: 19px;  }
.arama-form2 > .form { float: left; width: 100%; border-top: 1px dotted #666; padding: 10px 0; margin-top: 10px; }
.arama-form2 > .form > input[type=text] { float: left; width: 87.5%; border: 1px solid #ccc; padding: 4px; margin-bottom: 5px; margin-right: 5px; border-radius: 3px; }
.arama-form2 > .form > select { float: left; width: 87.5%; border: 1px solid #ccc; padding: 4px; margin-bottom: 5px; margin-right: 5px; border-radius: 3px; }
.arama-form2 > .form > textarea { float: left; width: 87.5%; font-family: Arial; height: 80px; border: 1px solid #ccc; padding: 4px; margin-right: 5px; border-radius: 3px; }
.arama-form2 > .form > .button { float: left; width: 100%; border: none; cursor: pointer; background-color: #555; color: #fff; text-align: center; padding: 10px 0; border-radius: 3px; margin-top: 15px; }
.arama-form2 > .form > .button:hover { background-color: #333;  }

.arama-form3 { float: right; position: relative; width: 100%; height: 320px; margin-top: 0px; margin-bottom: 20px; background-color: #fff; border: 1px solid #5d5d5d; padding: 20px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4); z-index: 555; }
.arama-form3 > span.caption { float: left; width: 100%; font-family: Arial; font-size: 18px; color: #5d5d5d; font-weight: bold; margin-bottom: 5px; }
.arama-form3 > ul { float: left; width: 100%; margin: 0; padding: 0; list-style-type: none; margin-top: 20px; }
.arama-form3 > ul > li { float: left; width: 100%; color: #666; font-family: 'Roboto', Helvetica, Arial, sans-serif; font-size: 12px; line-height: 19px; margin-bottom: 5px; }
.arama-form3 > ul > li > i {  float: left; font-style: normal; font-family: 'Troy'; font-size: 18px; margin: -2px 15px 0 0; line-height: 19px;  }
.arama-form3 > .form { float: left; width: 100%; border-top: 1px dotted #666; padding: 10px 0; margin-top: 10px; }
.arama-form3 > .form > input[type=text] { float: left; width: 20.5%; border: 1px solid #ccc; padding: 4px; margin-bottom: 5px; margin-right: 5px; border-radius: 3px; }
.arama-form3 > .form > select { float: left; width: 20.5%; border: 1px solid #ccc; padding: 4px; margin-bottom: 5px; margin-right: 5px; border-radius: 3px; }
.arama-form3 > .form > textarea { float: left; width: 20.5%; font-family: Arial; height: 80px; border: 1px solid #ccc; padding: 4px; margin-right: 5px; border-radius: 3px; }
.arama-form3 > .form > .button { float: left; width: 88%; border: none; cursor: pointer; background-color: #555; color: #fff; text-align: center; padding: 10px 0; border-radius: 3px; margin-top: 15px; }
.arama-form3 > .form > .button:hover { background-color: #333;  }

.page { margin: 0 auto; width: 90%; z-index: 10; margin-top: 68px;  }
.page2 { margin: 0 auto; width: 90%; z-index: 10; margin-top: 68px;  }
.col-60 { float: left; width: 100%;   margin-bottom: 68px;}
.col-40 { float: left; width: 100%; margin-bottom: 68px;}
.colx-50 { float: left; width: 100%; margin-bottom: 68px;}
.colrx-50 { float: left; width: 100%; margin-bottom: 68px;}
h4 { float: left;  width: 100%; font-family: 'Poiret One', Helvetica, Arial, sans-serif; font-size: 35px; font-weight: normal; color: #676e76; }


.containerx iframe {
top: 0;
left: 0;
width: 100%;
height: 120%;
position: absolute;
}
.container2x {
float: right;
height: 0;
width: 200px;
padding-bottom: 100%;
overflow: hidden;
position: relative;
}

}

.wrapperx {
width: 100%;

}
.containerx {
height: 0;
width: 100%;
padding-bottom: 40%;
overflow: hidden;
position: relative;
}
.containerx iframe {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
}

.wrapper2x {
width: 100%;
}
.container2x {
height: 0;
width: 100%;
padding-bottom: 100%;
overflow: hidden;
position: relative;
}
.container2x arama-form {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
}

.container3x {
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
}
iframe {
  max-width: 100%;
}

.tablefont {
font-size: 18px;
				font-family: Verdana, Arial, Helvetica, sans-serif, Tahoma; 
                text-align: center;
				background-color: #4CAF50;
	        
	            padding: 15px;
 	            text-align: left;
                color: white;
	            height: 20px;

}

a.m		{ color: #000000; text-decoration: none;  font-family: Verdana, Arial, Helvetica ; font-size: 12px; line-height: 16px;}
a.m:visited{ color: #000000; text-decoration: none;  font-family: Verdana, Arial, Helvetica ; font-size: 12px; line-height: 16px;}
a.m:active	{ color: #000000; text-decoration: none;  font-family: Verdana, Arial, Helvetica ; font-size: 12px; line-height: 16px;}
a.m:hover	{ color: #ff0000; text-decoration: none;  font-family: Verdana, Arial, Helvetica; font-size: 12px; line-height: 16px;}

a.m2		{ color: #000000; text-decoration: none;  font-family: Verdana, Arial, Helvetica ; font-size: 12px; line-height: 16px;}
a.m2:visited{ color: #000000; text-decoration: none;  font-family: Verdana, Arial, Helvetica ; font-size: 12px; line-height: 16px;}
a.m2:active	{  color: #000000; text-decoration: none;  font-family: Verdana, Arial, Helvetica ; font-size: 12px; line-height: 16px;}
a.m2:hover	{  color: #ff0000; text-decoration: none;  font-family: Verdana, Arial, Helvetica; font-size: 12px; line-height: 16px;}

a.m3 { color: #ffffff; text-decoration: none;  }
a.m3:visited { color: #ffffff; text-decoration: none;  }
a.m3:active { color: #ffffff; text-decoration: none;  }
a.m3:hover { color: #5d5d5d; text-decoration: none;  }

a.m4 { color: #ffffff; text-decoration: none;  }
a.m4:visited { color: #ffffff; text-decoration: none;  }
a.m4:active { color: #ffffff; text-decoration: none;  }
a.m4:hover { color: #ffffff; text-decoration: none;  }

#ortasol, #orta, #ortasag {
   display:inline-block; 
	width: 100%;

#orta {
left;0;
 width: 100%;
 background: white;
border: 5px solid red;
}
#ortasol {
left;0;
  width: 48%;
 background: white;
border: 1px solid black;
}

#ortasag {
 left:60%;
 width: 30%;
 background: white;
border: 1px solid black;
}

.iskele
{
margin:0 auto;
overflow:hidden;
padding:0 auto;
border:1px solid blue;
width:100%;
height:630px;
}
.div-1 {width:300px;height:100px; border:1px solid #000;margin:5px;padding:5px;float:left;}
.div-2 {width:300px;height:100px; border:1px solid #000;margin:5px;padding:5px;float:left;} 


.margin {text-align:center; }
.bg-1 { 
      background-color: #1abc9c; /* Green */
      color: #ffffff;
  }




.resimgaleri { 
border: 3px solid #fff;
    padding: 0;
 width: 100px;
 height: 50px;
} 
  .containerx {
      padding-top: 30px; width: 299px;
      padding-bottom: 30px;
	  width: 100%;
	   height: 100%;
  }
 
 .no-gutters {
  margin-right: 5px;
  margin-left: 5px;
    margin-top: 5px;

  > .col,
  > [class*="col-"] {
    padding-right: 5px;
    padding-left: 5px;
	padding-top: 5px;
  }
}