/* CSS Document */

/* - - - - - - - - - - - - - - - - - - - - -

Title : IC&CO
URL : https://icco.com.au/

Author : FOX DESIGN creative
URL: www.foxdesign.com.au

- - - - - - - - - - - - - - - - - - - - - */

/*----------------------------------------------------------------------------- 
Global Styles
-----------------------------------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea, blockquote,th,td { 
	margin:0;
	padding:0;
}
 
table {
	border-collapse:collapse;
	border-spacing:0;
}

html,body,div,dl,dt,dd,pre,form,fieldset,input,textarea,blockquote { 
	margin:0; 
	padding:0; 
}

html { 
	margin:0; 
	padding:0; 
	overflow: -moz-scrollbars-vertical;
}

html,body {
	margin:0;
	padding:0;
}

 

/* set image max width to 100% */
img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}

body,td,th,p,li,h2,h3,h4,h5 {font-family: 'Catamaran', sans-serif; font-weight: 300; font-size:18px; line-height:30px; color: #000; }
body {
 	margin-left: 0px;	margin-top: 0px;	margin-right: 0px;	margin-bottom: 0px;
}

a { color: #fff; text-decoration:none;}
a:hover { color: #000;}

h1 {padding: 20px 0; margin:0px;  font-family: 'Abril Fatface', cursive;  font-weight: 400; font-size:45px; line-height:45px; color:#eab8b3; text-transform: uppercase;}

h2 {padding: 10px 0; margin:0px; font-size:45px; line-height:45px; color:#fff;text-align:center;  text-transform: uppercase; }

h3 {padding: 10px 0; margin:0px; font-size:26px; line-height:26px;  color:#fff;   text-align: left;}

h4 {padding: 10px 0; margin:0px; font-size:26px; line-height:20px;  color:#fff;   text-align:center; padding-bottom: 20px;}
 
fieldset { 	border: 0; }

.clear { 
	clear: both; 
	font-size: 0; 
	height: 0; 
	line-height: 0; 
}
a img{ border:none;}
hr {height: 1px; color: #e6e4e2;  }

b{font-size:14px}
p{ margin:0; padding:15px 0; color:#ffffff; font-size:18px; line-height:30px; }

p a{ color:#ffffff; text-decoration:underline; }

/* end of global*/

#wrap{ float:left; 
width:100%; height:100%; 
min-height:100%; 
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
position:relative;
}
 
.wrap_general{ float:left; width:100%; height:auto;}



/* header */
.main-logo {
  height: 60px;
  width:120px;
  position: fixed;
  z-index: 2;
 left: 35px;
  top: 30px;
  cursor: pointer;
}

/* site content */
.site_wrap{  margin:0 auto; padding:120px 30px 50px 30px;  max-width: 1200px; height:auto; position: relative; }

.site_left{float:left; width:50%; height:auto;filter: grayscale(100%); position: relative; }
.site_left:hover {  filter: grayscale(100%); }

.site_right{ float:left; padding: 0 3% 3% 3%; width:44%; height:auto; position: relative; }
.site_right h1 {padding: 20px 0; margin:0px;  font-family: 'Abril Fatface', cursive;  font-weight: 400; font-size:45px; line-height:45px; color:#eab8b3; text-transform: uppercase;  }
.site_right h3 {padding: 20px 0; margin:0px; font-size:30px; line-height:36px;  color:#fff;   text-align: left;}
.site_right p{ margin:0; padding:15px 0; color:#ffffff; font-size:18px; line-height:30px; text-align:justify;}
 
.site_right p a { color: #fff; }
.site_right p a:hover { color: #e9b8b4;}

.terms{float:left; width: 100%; height: auto; column-count: 2; column-gap: 20px; }

@media screen and (max-width:960px) {
 .site_left{ width:100%;  }
 .site_right{width:100%; }
 .terms{float:left; width: 100%; height: auto; column-count: 1; column-gap: 20px; }
	}


/*  footer  */

.footer_wrap{float:left; width: 100%; height: auto; margin-bottom: 50px;}

.footer{ float: left; width: 100%; border-top: solid #F3D6D7 1px; margin-top: 50px; padding-top: 20px;color: #fff; text-align: center;}
 
.footer a{color: #707070; }
 
.footer a:hover{color: #B0B0B0 }


 /*----------------------------------------------------------------------------- 
home page style
-----------------------------------------------------------------------------*/

/* home page logo & down arrow */
#home_wrap{ position:relative; float:left; width:100%; min-height:100vh;}

#home_logo{ position:absolute; top:150px; height:50px; left:50%; margin-left:-120px; text-align: center;  font-family: 'Raleway', sans-serif; font-weight:700; font-size:20px;}
html>body #home_logo{ height:auto;}
#home_logo a {color:#ffffff;  line-height:33px; font-size:20px;}  
#home_logo a:hover {color:#e12f29;}
 

#down-arrow{
	position: absolute;
	bottom: 60px;
	height: 50px;
	left:50%; 
	margin-left: -25px;
}
.bounce {
	-moz-animation: bounce 3s infinite;
	-webkit-animation: bounce 3s infinite;
	animation: bounce 3s infinite;
}
@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

 
/*==============-home page=============*/
.home-page-title{float:left; width: 100%; height: auto;  padding: 30px 0; position: relative;  background: #e8b8b5; }
.home-page-title h1 {padding: 20px 0; margin:0px;  font-family: 'Abril Fatface', cursive;  font-weight: 400; font-size:45px; line-height:45px; color:#000; text-transform: uppercase; text-align: center;}


  
/*-contact us-*/

#contact-us_wrap{float: left; width: 100%; height: auto; background:#132530; padding: 40px 0;}
#contact-us{ margin: 0 auto; max-width: 800px; height: auto;}
#contact-us h1{ font-size:45px; line-height:40px; color:#8dc63f; padding: 0px; margin:25px 0; text-align:center ;  text-transform: uppercase;}
#contact p{font-family:'Raleway',sans-serif; font-weight: 400; font-size:20px; line-height:28px; color: #ffffff; padding-bottom:20px; }
.title{color:#8dc63f;}

@media screen and (max-width: 800px) {
#contact-us{ max-width:90%; }
	}


/*==============-services page-=============*/
.page-title{float:left; width: 100%; height: auto;  padding: 100px 0 20px 0;}
.page-title h1 {padding: 20px 0; margin:0px;  font-family: 'Abril Fatface', cursive;  font-weight: 400; font-size:45px; line-height:45px; color:#eab8b3; text-transform: uppercase; text-align: center;}
@media screen and (max-width: 800px) {
.page-title h1 {padding: 16px 0; margin:0px;  font-size:35px; line-height:35px;  }
}

fix-bg {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-attachment: fixed;
	height:auto;
	min-height:100vh  /* 1vh — one equal 1/100 height of viewport.*/;
	float:left;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  width:100%;
}
 

/* set image max width to 100% */
img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}


/* main */
.content_wrap{ margin:0 auto; width:100%; min-height:100vh; }
  
.service_listing{float:left; width:90%; height:auto;  padding:360px 5% 100px 5%;  text-align: center; 
}
.service_listing p{ font-size:36px; line-height: 46px;}

@media screen and (max-width: 1440px) {
.service_listing{ padding-top:280px;}
	}
 
@media screen and (max-width: 1200px) {
.service_listing{ padding-top:280px;}
 
body,td,th,p,li { font-size:20px; line-height:30px; }
	}
 
@media screen and (max-width: 640px) {
.service_listing{ padding-top:300px;}
	}



 /*----------------------------------------------------------------------------- 
blog
-----------------------------------------------------------------------------*/
#blog_wrap-out{float:left; width:100%; height: auto; background: #3b3d3f;}
#blog_wrap{margin: 0 auto; padding: 30px; max-width:1360px; height: auto;}

 .subnav_wrap{float: left; width:100%; padding-bottom:10px; border-bottom:1px solid #000000; margin-bottom:50px;}
 .subnav{magin:0 auto; width:100%; height:auto; }
 .subnav ul{magin:0 auto; width:100%;height:auto; list-style:none; text-align:center;}
 .subnav ul li{ width:auto; height:auto; list-style:none; margin-bottom:20px; display:inline-block;}
 .subnav ul li a{ font-size:20px; line-height:20px; padding:10px 0 0 0; color:#fff; margin:10px 25px 0 25px;}
 .subnav ul li a:hover{border-bottom:solid 3px #e9b8b4;}
 .subnav ul li.selected a{border-bottom:solid 3px #fff;}
 .subnav ul li.selected a:hover{border-bottom:solid 3px #e9b8b4;}

@media screen and (max-width: 680px) {
  .subnav ul li a{ font-size:20px; line-height:20px; padding:10px 0 0 0; color:#fff; margin:10px 12px 0 12px;}  
}


.page-close a{ float:left; width:100%; margin: 40px 0 50px 0; border:40px 0; border-top:3px solid #000000; font-family: 'Barlow Semi Condensed', sans-serif; font-size:100px; line-height:100px; color:#000000; text-align: center;} 
.page-close a:hover{ color:#666666;}

@media screen and (max-width: 1200px) {
 
.page-title h2{font-size:30px; line-height:32px;  }
.page-title h3 { font-size:30px; line-height:28px;}
.page-close a{ font-size:80px; line-height:100px; } 
 }
 
/*--blog_  Chinese verison ? --*/	
.page-title_cn{ float:left; width:100%; height:auto; padding-bottom:10px; border-bottom:15px solid #000000; margin:50px 0 20px 0;}
.page-title_cn h1{float:left; padding:0 0 0 2%; margin:0 0 30px 0; width:98%; border-left:10px solid #00afed; height:auto; font-family: 'Barlow Semi Condensed', sans-serif; font-size:55px; line-height:55px; color:#000000; text-align:left; text-transform:uppercase;} 
.page-title_cn h2{ text-transform:none; font-size:30px; line-height:40px; padding-bottom:40px;}
 
.page-title_cn h3 {font-family: 'Barlow Semi Condensed', sans-serif; font-size:50px; line-height:42px; color: #000000; padding:45px 0px 0px 0px; margin:0px;  text-align:left; text-transform: none; border:0; margin-bottom:25px;}
  
  
@media screen and (max-width: 1200px) {
.page-title_cn h1{font-size:60px; line-height:60px;  }
.page-title_cn h2{font-size:30px; line-height:32px;  }
.page-title_cn h3 { font-size:30px; line-height:28px;}
	}
 

/*grid-a-licious css*/ 	
.example { margin-bottom: 20px;}

#example1 {
  padding: 0 0 0 8px;
 
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;

  margin-bottom: 10px;
}

#example2 {
  padding: 0 0 0 8px;
 
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;

  margin-bottom: 10px;
}
 
.item {
  color: #fff;
  border:0px solid #333;
  border-radius: 10px;
  padding: 20px;
 
  word-wrap: break-word;
  white-space: pre;
  white-space: pre-wrap;
  text-align:left;
  line-height:24px;
  display:block;

}
.item img{width:100%; height:auto; padding-bottom:15px; border-radius: 5px;  border-bottom:10px solid #e9b8b4; margin-bottom:20px; text-align:center;}
.item p{ float:left; width:100%; padding:1% 0; 
 word-wrap: break-word; white-space: pre; white-space: pre-wrap;
font-family: 'Barlow Condensed', sans-serif; font-size:1.5em; line-height:1em; color:#fff;text-transform:uppercase; margin-bottom:0;}
.sub-title{float:left; width:100%; height:auto;font-size:16px; line-height:20px;padding:10px 0 20px 0; text-transform:none;
 border-bottom:1px solid #999; margin-bottom:20px;
}
 
.item:hover{ background:#e9b8b4;}
 

.item .client {width:100%; height:auto;}
.item .client img{width:100%; height:auto; padding-bottom:0; border-bottom:0; margin-bottom:0; text-align:center;}
 
/*end of grid-a-licious css*/ 



/*blog*/ 
.blog_left{float:left; width:50%; height:auto; }
@media screen and (max-width:960px) {
 .blog_left{ width:100%;  }
	}

#photo-gallery {float: left;  margin-top: 50px; width: 100%; height: auto;}


/*  Subscribe */
.newsletter_wrap-out { float: left; width: 100%; height: auto; border-top: solid #F3D6D7 1px; margin-top: 50px; padding-top: 50px;color: #fff;  z-index: 1000;}
.newsletter_wrap{margin: 0 auto; padding: 20px 0; width: 100%; height: auto;  }
.newsletter_wrap-services{margin: 0 auto; padding: 20px 30px; max-width: 1200px; height: auto;  }
.newsletter_left{float:left; width: 50%;}
.newsletter_right{float:right; width: 40%;}

.newsletter_wrap-out h3 {padding: 20px 0; margin:0px;  font-family: 'Abril Fatface', cursive;  font-weight: 400; font-size:35px; line-height:35px; color:#eab8b3; text-transform: uppercase;}

.newsletter_wrap-out h4 {padding: 20px 0; margin:0px;  font-family: 'Abril Fatface', cursive;  font-weight: 400; font-size:35px; line-height:35px; color:#999; text-transform: uppercase; text-align: left;}

.newsletter_wrap-out ul {list-style: none; margin: 0; padding: 0;}

.newsletter_wrap-out li {list-style: none; margin: 0; padding:15px 0; font-size: 28px; line-height: 28px; color: #999; text-transform: uppercase;  font-family: 'Abril Fatface', cursive; }
@media screen and (max-width:960px) {
.newsletter_left{float:left; width:100%;}
.newsletter_right{float:right; width: 100%;}
	}

 

/*============   ads ============ */

.ads_wrap{float:left; width: 100%; height: auto; margin: 40px 0;}

.ads{ float: left; width: 100%; border-top: solid #F3D6D7 10px;  border-bottom: solid #F3D6D7 10px; padding: 30px 0; color: #fff; text-align: center;}
 
.ads a{color: #707070; }
 
.ads a:hover{color: #B0B0B0 }

#head_reservation { position:fixed;  top:60px; right:20px; height:auto; margin-right:0px; z-index: 1000; }


/*============ search ============*/

#search_wrap{ float:left; width:215px; height:36px; margin:19px 0 19px 80px;   position: fixed; right: 85px; top: 23px;  z-index: 1; }
#search-bar{ float:left; width:177px; height:36px; margin-right:2px;}
#search-btn{ float:right; width:36px; height:36px;}

.searchfield
{ 
 border:none; border-width:0px;
 margin:0px;  
 font:normal 14px/20px Helvetica, Arial, sans-serif;
 text-align:center;
 color:#000;
 height:20px; width:92%;
 padding:8px 4%; 
 background:#ffffff;
 border-radius: 5px 0px 0px 5px
}

.searchfieldhalf
{ 
 border:none; border-width:0px;
 margin:0px; padding:0px; 
 font:normal 14px/38px Arial, Helvetica, sans-serif;
 text-align:center;
 color:#b5b3b5;
 height:38px; width:128px;
 background:none;
}

.search_btn
{ 
 margin:0; 
 font:normal 14px/38px Arial, Helvetica, sans-serif;  
 color: #FFF;
 cursor:pointer;
 text-align:center;
 border:none;
 height:36px; width:100%;
 background: url(../images/search_icon.png); background-repeat:no-repeat;
}
.search_btn:hover {background: url(../images/search_icon-hover.png);  background-repeat:no-repeat;}
 
.sub-title{ float: left; width: 100%; height: auto; border-bottom: solid #000 1px; margin-bottom: 50px; padding-bottom: 10px;color: #fff;  z-index: 1000;}

.sub-title h4 {padding: 10px 0; margin:0px; font-size:22px;  line-height:20px;  color:#fff;   text-align:center; padding-bottom: 10px;}