.container {position:relative; width:100%; max-width:1000px; margin:0 auto; padding: 0 20px; box-sizing:border-box; }
.container-fluid {position:relative; width:100%; margin:0 auto; padding: 0; box-sizing:border-box; }
.column,.columns { width: 100%; float: left; box-sizing: border-box; }
.pad{padding:40px 0}
.padd{padding:80px 0; min-height:60px}
.br{color:#fff}
.ouro{color:#f5cf3d}
.ourobg{background-color:#f5cf3d}
.blubg{background-color:#71a1b9}
.blu {color:#4ab4c8}
.roxo{color:#2c3765}
.orange{color:#f7921c}
.cz{color:dimgray}
.som{text-shadow:1px 1px 19px rgba(0, 0, 0, 0.4);}
.somd{-webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.5);-moz-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.5);box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.5);}}
.over{position:absolute; float:left;z-index:100;}
.trans{background-color: cornflowerblue;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";filter:alpha(opacity=50);opacity:0.5}
.oki{text-transform: uppercase}
.img-circle {border-radius: 50%;}
.bloc{padding:20px 17px 0px 22px; min-height:120px; margin:14px 0; -webkit-box-shadow: 0px 0px 30px 0px rgba(30,38,61,0.14);
-moz-box-shadow: 0px 0px 30px 0px rgba(30,38,61,0.14); box-shadow: 0px 0px 30px 0px rgba(30,38,61,0.14);}
#ganhadores{padding:120px 0 80px 0}

.row {padding:0 20px}

.material-icons{margin:0 10px 0 0}
.tiny{font-size:1rem}
.small{font-size: 2.3rem}
.medium{font-size: 3rem}
.large{font-size: 5rem}


/* For devices larger than 400px */
@media (min-width: 600px) {
    .container {width: 85%; padding: 0; }
    .row {padding:0}
}

/* For devices larger than 550px */
@media (min-width: 820px) {
  .container { width: 80%; }
  .column, .columns { margin-left: 4%; }
  .column:first-child, .columns:first-child { margin-left: 0; }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }

}


/* Base Styles
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {font-size: 62.5%; background-color:#fff}
body {font-size: 1.70em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.6; font-weight:300; font-family: 'Oxygen', sans-serif; color:#272727; overflow-x: hidden}

h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom:1rem; font-weight:300; letter-spacing: -.05rem;}
h1 { font-size: 7.2rem; line-height: 1.1;  letter-spacing: -.06rem color:#fff}
h2 { font-size: 3.4rem; line-height: 1.2;  color:#74b6d6}
h3 { font-size: 2.8rem; line-height: 1.3;  color:#3f7692}
h4 { font-size: 2.0rem; line-height: 1.5; }
h5 { font-size: 1.5rem; line-height: 1.5; }
h6 { font-size: 1.2rem; line-height: 1.6;  letter-spacing: 0; }

/* Larger than phablet */
@media (min-width: 550px) {
  h1 { font-size: 7.2rem; }
  h2 { font-size: 3.4rem; }
  h3 { font-size: 2.8rem; }
  h4 { font-size: 2.0rem; }
  h5 { font-size: 1.5rem; }
  h6 { font-size: 1.2rem; }
}

p { margin-top: 0; }


/* Links–––– */
a {color:#367483; text-decoration:none;
-o-transition:color .2s ease-out, background 1s ease-in; -ms-transition:color .2s ease-out, background 1s ease-in; -moz-transition:color .2s ease-out, background 1s ease-in; -webkit-transition:color .2s ease-out, background .2s ease-in;}
a:hover {color:#4ab4c8; text-decoration:none}



/* Buttons–––– */
.button,button,input[type="submit"],input[type="reset"],
input[type="button"] {display:inline-block; height:44px; padding:0 20px; color:#555; text-align:center; font-size:12px; font-weight:bold; line-height:44px; text-decoration: none; white-space: nowrap; background-color: transparent; border-radius:22px; cursor: pointer; box-sizing: border-box; border: 1px none #fff;}
.button:hover,button:hover,input[type="submit"]:hover,input[type="reset"]:hover,input[type="button"]:hover,.button:focus,button:focus,input[type="submit"]:focus,input[type="reset"]:focus,input[type="button"]:focus {color:#333; border-color:#fff; outline: 0; }
.button.button-primary,button.button-primary,input[type="submit"].button-primary,input[type="reset"].button-primary,
input[type="button"].button-primary {color: #FFF; background-color: #4ab4c8; border-color: #4ab4c8}
.button.button-primary:hover,button.button-primary:hover,input[type="submit"].button-primary:hover,input[type="reset"].button-primary:hover,input[type="button"].button-primary:hover,.button.button-primary:focus,button.button-primary:focus,input[type="submit"].button-primary:focus,input[type="reset"].button-primary:focus,input[type="button"].button-primary:focus {color:#FFF; background-color:#47d4ef; border-color:#fff;}

.button-sec{height:38px; padding:8px 12px 8px 12px; color:#fff; text-align:center; font-size:12px; font-weight:bold; line-height:38px; text-decoration: none; white-space: nowrap; background-color:#4ab4c8; border-radius:19px; cursor: pointer; box-sizing: border-box; margin:0 10px}
.button-sec:hover {color:#fff; background-color:#47d4ef}


/* Forms–––––– */
input[type="email"],input[type="number"],input[type="search"],input[type="text"],input[type="tel"],input[type="url"],input[type="password"],
textarea,select {height: 38px; padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff; border: 1px solid #D1D1D1; border-radius: 4px; box-shadow: none; box-sizing: border-box; }
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],input[type="number"],input[type="search"],input[type="text"],input[type="tel"],input[type="url"],input[type="password"],
textarea {-webkit-appearance: none; -moz-appearance: none;appearance: none; }
textarea {min-height: 65px; padding-top: 6px; padding-bottom: 6px; }
input[type="email"]:focus,input[type="number"]:focus,input[type="search"]:focus,input[type="text"]:focus,input[type="tel"]:focus,input[type="url"]:focus,input[type="password"]:focus,textarea:focus,select:focus {border: 1px solid #fff; outline: 0; }
label,legend {display: block; margin-bottom: .5rem; font-weight:bold}
fieldset { padding: 0; border-width: 0; }
input[type="checkbox"],input[type="radio"] { display: inline; }
label > .label-body { display: inline-block; margin-left: .5rem; font-weight: normal; }


/* Lists––––––––– */
ul {list-style: circle inside; }
ol {list-style: decimal inside; }
ol, ul {padding-left: 0; margin-top: 0; }
ul ul,ul ol,ol ol,ol ul {margin: 1.5rem 0 1.5rem 3rem; font-size: 90%; }
li {margin-bottom: 1rem; }


/* Code–––––––––– */
code {padding:.2rem .5rem; margin: 0 .2rem; font-size:90%; white-space:nowrap; background:#F1F1F1; border:1px solid #E1E1E1; border-radius:4px}
pre > code {display: block;padding: 1rem 1.5rem;white-space: pre; }


/* Tables––– */
table {border-collapse: collapse; margin:0; padding:0; width:100%; table-layout:fixed}
table caption {font-size:1.5em; margin:.5em 0 .75em 0}
table tr {padding:2em 0}
table th,table td { padding:.625em 0; text-align: center; border-bottom: 1px solid #E1E1E1}
table th, thead {font-size: .8em; text-transform: uppercase; font-weight: bold}
.padr{font-size:22px}
.ttd {font-size:15px}

@media screen and (max-width: 600px) {
  table thead {border:none; clip: rect(0 0 0 0); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px; }
  table tr {background-color:#fff; display:block; padding:0 10px; border-bottom:12px solid #e7eff3}
  table td {border-bottom: 1px solid #ddd; display:block; font-size:11px; text-align:right}
  table td:before {content: attr(data-label); float: left; }
  .ttd {font-size:12px}
}



/* Spacing–––––– */
button,.button {margin-bottom: 1rem; }
input,textarea,select,fieldset {margin-bottom: 1.5rem; }
pre,blockquote,dl,figure,table,p,ul,ol,form {margin-bottom: 2.5rem; }


/* Utilities––––––––– */
.u-full-width {width:100%; box-sizing: border-box}
.u-half-width {width:49%; box-sizing: border-box}
.u-max-full-width {max-width: 100%;  box-sizing: border-box}
.u-pull-right {float:right}
.u-pull-left {float:left}
.text-center{text-align: center}
.text-just{text-align: justify}


/* Misc––––––– */
hr {margin-top:4rem; margin-bottom:4rem; border-width:0; border-top: 1px solid #E1E1E1}


/* Clearing–––– Self Clearing Goodness */
.container:after,.row:after,.u-cf { content:""; display:table; clear:both}


/* Media Queries––––– Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.*/

@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}
@keyframes sk-bounce {
  0%, 100% { transform: scale(0.0);-webkit-transform: scale(0.0);
  } 50% { transform: scale(1.0); -webkit-transform: scale(1.0); }
}







/* Larger than mobile */
@media (min-width: 320px) {
.foot {min-height:480px; width:100%; color:#fff; background:url(../img/wclean-pe.png) no-repeat; background-position:top center; background-color: #1a4055; padding-top:130px;margin-top:30px}
.foot p{font-size:12px}.foot h3{font-size:18px}
.foot a{color:#74c0d6; text-decoration:none}

.top {background-color:none; z-index:50; position:absolute; top:0; left:0; height:40px}

.logo{position:absolute;float:left; width:220px; z-index:80; margin:20px 0 0 0;left:20px}
#como{margin:100px auto 40px auto; z-index:200; top:290px}
#comop{margin:200px auto 0 auto; z-index:120; padding:200px 0; background:url(../img/wclean-meios-de-cultura.jpg) no-repeat; background-position:top center;}
.tit{z-index:500; position:absolute; top:120px; left:80px}
.tit h1, .tit h2, .titin h1, .titin h2{color: #FFFFFF;text-shadow: 0px 1px 22px #092d50}
.tit h1{color:#fff; font-size: 34px;}
.tit h2{color:#fff; font-size:20px}
    .hero img{width:230%; position: absolute; z-index:2; top:0; left:-55%}
    .hero1 img{width:46%; position: absolute; z-index:120; top:123px; left:-10%}
    .hero2 img{width:77%; position: absolute; z-index:110; top:90px; left:-37%}
    
#comoin{margin:100px auto 40px auto; z-index:200; top:230px}
#comopin{margin:200px auto 0 auto; z-index:200; top:80px; padding-bottom:80px}
    .titin{z-index:500; position:absolute; left:20px; top:120px}
    .titin h1{font-size:3rem; }
    .titin h2{font-size:2rem; }
    .heroin img{width:190%; position: absolute; z-index:2; top:0; left:-14%}
    .heroin2 img{width:68%; position: absolute; z-index:110; top:85px; left:-35%}
    
#menu{display:none}
.slide-menu-open {text-decoration:none; position:absolute; right:20px; top:18px; text-shadow:1px -1px 1px #000; z-index:590; font-weight:bold; color:#fff;} 
.side-menu-wrapper {overflow-y:auto; overflow-x:hidden;background:rgba(41,81,107,1.0); z-index:600; padding:40px 20px 0 40px; position:fixed; top:0px; right:-340px; /* Sidebar initial position. "right" for right positioned menu */ height:100%; transition: 0.5s; width:220px; color:#fff; text-decoration:none; -webkit-box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.5);-moz-box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.5);box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.5);}
.side-menu-wrapper > ul {list-style:none; padding:0; margin:0;overflow-y:auto; width:300px; height:96%;}
.side-menu-wrapper > ul > li > a {display:block; padding:10px 0; color:#fff; transition:0.3s; text-decoration:none; font-size:17px; font-weight:bolder}
.side-menu-wrapper > ul > li > ul > li {display:block; padding:2px 0; transition:0.3s; text-decoration:none; list-style:none; font-size: 12px; z-index:602}
.side-menu-wrapper > ul > li > ul > li > a {color: #ffffff}
.side-menu-wrapper > a.menu-close {padding:0 0 4px 18px;color:#74c0d6; font-weight:bolder; display:block;margin:-45px 0 -13px -20px;font-size:40px; text-decoration:none; text-shadow:1px 1px 19px rgba(0, 0, 0, 0.5); z-index:622}
.side-menu-overlay {height:120%; width:0; position:fixed; z-index:510; top:-60px; left: 0; background-color:rgba(41,81,107,.8);
overflow-y:auto; overflow-x:hidden; opacity:0; transition:opacity 1s;}


#nav-icon4 {width:32px; height:20px; position:fixed; top:20px; right:22px; -webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: .5s ease-in-out;-moz-transition: .5s ease-in-out;-o-transition: .5s ease-in-out; transition: .5s ease-in-out;cursor: pointer; z-index:300}
#nav-icon4 span {display: block; position: absolute; height:3px; width:100%; background:#fff; border-radius:2px; opacity: 1; left: 0; -webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg); -webkit-transition: .25s ease-in-out;-moz-transition:.25s ease-in-out;-o-transition:.25s ease-in-out;transition:.25s ease-in-out;-webkit-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.8);-moz-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.8);box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.8);}
#nav-icon4 span:nth-child(1) {top: 0px;-webkit-transform-origin:left center;-moz-transform-origin:left center;-o-transform-origin: left center;transform-origin: left center;}
#nav-icon4 span:nth-child(2) {top:9px; -webkit-transform-origin:left center;-moz-transform-origin:left center;-o-transform-origin: left center;transform-origin: left center;}
#nav-icon4 span:nth-child(3) {top:17px;-webkit-transform-origin:left center;-moz-transform-origin:left center; -o-transform-origin: left center; transform-origin: left center;}
.men{color:#fff; font-size:0.96rem; position:fixed; top:45px;right:21px;letter-spacing:0.07em; text-shadow:1px 1px 9px rgba(0, 0, 0, 0.7);}
}


@media (min-width: 360px) {
#como{top:330px}
#comop{margin:300px auto 0 auto;}
.tit{top:140px; left:100px}
.tit h1{font-size:34px}
.tit h2{font-size:22px;}
    .hero img{width:235%; top:0; left:-37%}
    .hero1 img{width:52%; top:126px; left:-20%}
    .hero2 img{width:80%; top:100px; left:-38%}
    .heroin img{width:165%}
.heroin img{width:180%; top:0; left:-5%}
.heroin2 img{width:68%; top:85px; left:-35%}
}

@media (min-width: 375px) {
#como{top:350px}
.tit{top:145px; left:120px}
.tit h1{font-size:35px}
.tit h2{font-size:24px;}
    .hero img{width:240%; top:0; left:-29%}
    .hero1 img{width:55%; top:124px; left:-15%}
    .hero2 img{width:80%; top:100px; left:-23%}
#comoin{top:260px}
}

@media (min-width: 413px) {
#como{top:400px}
#comop{margin:350px auto 0 auto;}
.tit{top:145px; left:140px}
.tit h1{font-size:35px}
.tit h2{font-size:24px;}
    .hero img{width:237%; top:0; left:-29%}
    .hero1 img{width:55%; top:129px; left:-15%}
    .hero2 img{width:80%; top:100px; left:-23%}
    
#comoin{top:230px}
#comopin{top:70px}
    .titin{left:20px; top:120px}
    .titin h1{font-size:2.5rem; }
    .titin h2{font-size:1.9rem; }
    .heroin img{width:150%; top:0; left:0}
    .heroin2 img{width:60%; top:85px; left:-35%}
}

@media (min-width: 568px) {

}

@media (min-width: 667px) {
.foot p{font-size:14px}.foot h3{font-size:22px}
.logo{left:0px}
#como{top:370px}
#comop{margin:350px auto 0 auto;}
.tit{top:145px; left:190px}
.tit h1{font-size:2.4em}
.tit h2{font-size:1.4em}
    .hero img{width:130%; top:0; left:-15%}
    .hero1 img{width:30%; top:108px; left:10%}
    .hero2 img{width:50%; top:94px; left:-22%}
#comoin{top:210px}
#comopin{top:100px}
.titin{top:120px; left:0}
.titin h1{font-size:1.8em}
.titin h2{font-size:1.5em}
    .heroin img{width:120%; top:-100px}
    .heroin2 img{width:37%; top:60px; left:-22%}
}


@media (min-width: 736px) {
.foot {padding-top:130px;margin-top:50px}
#como{top:400px}
#comop{margin:380px auto 0 auto;}
.tit{top:145px; left:190px}
.tit h1{font-size:2.4em}
.tit h2{font-size:1.4em}
    .hero img{width:130%; top:0; left:-15%}
    .hero1 img{width:30%; top:118px; left:10%}
    .hero2 img{width:50%; top:94px; left:-22%}
#comoin{top:260px}
#comopin{top:100px}
.titin{top:140px;}
.titin h1{font-size:2.0em}
.titin h2{font-size:1.5em}
    .heroin img{width:110%; top:-100px}
    .heroin2 img{width:37%; top:60px; left:-22%}
}

@media (min-width: 800px) {
#como{top:430px}
#comop{margin:380px auto 0 auto;}
.tit{top:145px; left:230px}
.tit h1{font-size:3.1em}
.tit h2{font-size:1.9em}
    .hero img{width:130%; top:0; left:-15%}
    .hero1 img{width:30%; top:129px; left:10%}
    .hero2 img{width:50%; top:96px; left:-22%}
}

@media (min-width: 1000px) {
.foot p{font-size:15px}.foot h3{font-size:26px}
.tit{left:38%; top:160px}
#como{top:500px}
#comop{margin:550px auto 0 auto;}
.tit h1{font-size:6.0rem; }
.tit h2{font-size:3.2rem; }
    .hero img{width:103%; top:0; left:0}
    .hero1 img{width:25%; top:118px; left:14%}
    .hero2 img{width:42%; top:103px; left:-17%}
#comoin{top:270px}
#comopin{top:100px}
.titin{top:140px}
.titin h1{font-size:2.6em}
.titin h2{font-size:1.7em}
    .heroin img{width:100%; top:-150px}
    .heroin2 img{width:36%; top:20px; left:-23%}
}

/* Larger than Desktop HD */
@media (min-width: 1200px) {
.foot {padding-top:160px;margin-top:70px}
.logo{width:245px; margin:20px 0 0 0}
#como{top:600px}
#comop{margin:550px auto 0 auto;}
.tit{left:38%; top:260px}
.tit h1{font-size:6.3rem; }
.tit h2{font-size:3.8rem; }
    .hero img{width:100%; top:0; left:0}
    .hero1 img{width:25%; top:135px; left:13%}
    .hero2 img{width:42%; top:103px; left:-17%}
    
#comoin{top:360px}
#comopin{top:200px;padding-bottom:220px}
.titin{left:0; top:200px}
.titin h1{font-size:4.0rem; }
.titin h2{font-size:2.8rem; }
    .heroin img{width:100%; top:-220px; left:0}
    .heroin2 img{width:32%; top:60px; left:-16%}

.slide-menu-open {display:none}
.side-menu-wrapper {display:none}
#menu {display:block; margin:0; width:100%; position:absolute; right:0; z-index:50; text-align:left; height:120px; background:url(../img/brt.png) repeat;}
#menu ul {display:inline; list-style:none; float:right; margin-right:12%}
#menu ul li {font-size:14px; letter-spacing:0.2em; text-decoration:none; text-transform:uppercase; display:inline-block; position:relative; padding:45px 14px; cursor:pointer; -webkit-transition:all 0.2s; -moz-transition:all 0.2s; -ms-transition:all 0.2s; -o-transition:all 0.2s; transition:all 0.2s; text-shadow:0px 0px 8px rgba(255, 255, 255,1);}
#menu ul li a {color:#224c60;font-weight:400}
#menu ul li a:hover {color:#4ab4c8}
#menu ul li ul {border-radius:8px;position:absolute;left:0; width:220px; -webkit-box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.65);-moz-box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.65);box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.65); display:none; opacity:0; visibility:hidden; -webkit-transition: opacity 0.2s;-moz-transition: opacity 0.2s;-ms-transition: opacity 0.2s;-o-transition: opacity 0.2s;-transition: opacity 0.2s;}
#menu ul ul {background:#9aa9af; margin:0;padding:12px}
#menu ul li ul li {display:block; color:#fff; text-shadow:0 -1px 0 #000; font-size:13px}
#menu ul li ul li a {color:#fff;}
#menu ul li ul li a:hover {color:#7ac7ed; background: none}
#menu ul li:hover ul {display:block;opacity:1;visibility:visible;}
}

@media (min-width: 1430px) {
.foot {padding-top:10%;margin-top:100px}
#como{top:630px}
#comop{margin:580px auto 0 auto;}
.tit{left:35%; top:280px}
.tit h1{font-size:4.0em}
.tit h2{font-size:2.42em}
    .hero img{width:100%; top:0; left:0%}
    .hero1 img{width:23%; top:185px; left:14%}
    .hero2 img{width:47%; top:170px; left:-27%}
#comoin{top:400px}
#comopin{top:250px}
    .heroin img{width:100%; top:-220px; left:0}
    .heroin2 img{width:32%; top:60px; left:-14%}
}

@media (min-width: 1600px) {
#como{top:700px}
#comop{margin:630px auto 0 auto;}
.tit{left:36%; top:300px}
.tit h1{font-size:4.25em}
.tit h2{font-size:2.42em}
    .hero img{width:100%; top:-30px; left:0%}
    .hero1 img{width:24%; top:156px; left:16%}
    .hero2 img{width:45%; top:170px; left:-23%}
#comoin{top:400px}
#comopin{top:200px;}
.titin{left:0; top:220px}
.titin h1{font-size:4.0rem; }
.titin h2{font-size:2.8rem; }
    .heroin img{width:100%; top:-340px; left:0}
    .heroin2 img{width:30%; top:25px; left:-14%}
}

@media (min-width: 1900px) {
.foot {padding-top:100px;margin-top:200px}
#como{top:770px;}
#comop{margin:700px auto 0 auto;}
.foot {padding-top:200px}
.tit{left:35%; top:350px}
.tit h1{font-size:4.45em}
.tit h2{font-size:2.42em}
    .hero img{width:100%; top:-80px; left:0%}
    .hero1 img{width:22%; top:188px; left:18%}
    .hero2 img{width:40%; top:100px; left:-12%}
#nav-icon4 {width:42px; height:38px; position:fixed; top:35px; right:38px}
#menu ul {margin-right:24%}

#comoin{top:500px}
#comopin{top:340px;}
.titin{left:0; top:260px}
.titin h1{font-size:4.5rem; }
.titin h2{font-size:3rem; }
    .heroin img{width:100%; top:-340px; left:0}
    .heroin2 img{width:30%; top:25px; left:-14%}
}








#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0);}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:url(../img/overlay.png) repeat 0 0; opacity: 0.9; filter: alpha(opacity = 90);}
#colorbox{outline:0;}
    #cboxTopLeft{width:21px; height:21px; background:url(../img/controls.png) no-repeat -101px 0;}
    #cboxTopRight{width:21px; height:21px; background:url(../img/controls.png) no-repeat -130px 0;}
    #cboxBottomLeft{width:21px; height:21px; background:url(../img/controls.png) no-repeat -101px -29px;}
    #cboxBottomRight{width:21px; height:21px; background:url(../img/controls.png) no-repeat -130px -29px;}
    #cboxMiddleLeft{width:21px; background:url(../img/controls.png) left top repeat-y;}
    #cboxMiddleRight{width:21px; background:url(../img/controls.png) right top repeat-y;}
    #cboxTopCenter{height:21px; background:url(../img/border.png) 0 0 repeat-x;}
    #cboxBottomCenter{height:21px; background:url(../img/border.png) 0 -29px repeat-x;}
    #cboxContent{background:#fff; overflow:hidden;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{margin-bottom:28px;}
        #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
        #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
        #cboxLoadingOverlay{background:url(../img/loading_background.png) no-repeat center center;}
        #cboxLoadingGraphic{background:url(../img/loading.gif) no-repeat center center;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

        #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
        #cboxPrevious{position:absolute; bottom:0; left:0; background:url(../img/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxPrevious:hover{background-position:-75px -25px;}
        #cboxNext{position:absolute; bottom:0; left:27px; background:url(../img/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxNext:hover{background-position:-50px -25px;}
        #cboxClose{position:absolute; bottom:0; right:0; background:url(../img/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxClose:hover{background-position:-25px -25px;}

/*
  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
  See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,.cboxIE #cboxTopCenter,.cboxIE #cboxTopRight,.cboxIE #cboxBottomLeft,.cboxIE #cboxBottomCenter,.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,.cboxIE #cboxMiddleRight {filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);}