html { overflow-y: scroll;}

body{overflow-x:hidden;font-family:"Open Sans",Helvetica,Arial,sans-serif; font-weight:400; webkit-tap-highlight-color:#E00000}

.btn-primary,.btn-xl,h2,h3,h4,h5,h6{font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;text-transform:uppercase;font-weight:700}
h1 { margin:0; padding:0}
.text-muted {color:#555}
.text-primary,a {color:#E00000}
p {font-size:14px;line-height:1.75}
p.large {font-size:16px}
p a { color:#900; text-decoration:none;}
p a:hover { color:#F00; text-decoration:none;}
a,a.active,a:active,a:focus,a:hover{outline:0; color:#fec503; text-decoration:none;}
a.active,a:active,a:focus,a:hover{color:#F90; text-decoration:none;} /* color:#fec503 amarelo escuro */
.img-centered{margin:0 auto}
.bg-light-gray{background-color:#F3F3F3} /* background-color:#eee */
.bg-light-gray-2{background-color:#F6F6F6;}
.bg-darkest-gray{background-color:#222}
.mb-25 {margin-bottom:25px }

.btn-primary.active,.btn-primary:active,.btn-xl.active,.btn-xl:active,.open .dropdown-toggle.btn-primary,.open .dropdown-toggle.btn-xl{background-image:none}
.btn-primary{color:#fff;background-color:#E00000;border-color:#E00000}
.btn-primary.active,.btn-primary:active,.btn-primary:focus,.btn-primary:hover,.open .dropdown-toggle.btn-primary{color:#fff;background-color:#f00;border-color:#f00} /* background-color:#fec503;border-color:#f6bf01 */
.btn-primary.disabled,.btn-primary.disabled.active,.btn-primary.disabled:active,.btn-primary.disabled:focus,.btn-primary.disabled:hover,.btn-primary[disabled],.btn-primary[disabled].active,.btn-primary[disabled]:active,.btn-primary[disabled]:focus,.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary,fieldset[disabled] .btn-primary.active,fieldset[disabled] .btn-primary:active,fieldset[disabled] .btn-primary:focus,fieldset[disabled] .btn-primary:hover{background-color:#E00000;border-color:#E00000}
.btn-primary .badge{color:#E00000;background-color:#fff}
.btn-primary.focus,.btn-primary:focus, .btn-primary.active.focus,.btn-primary.active:focus,.btn-primary.active:hover,.btn-primary:active.focus,.btn-primary:active:focus,.btn-primary:active:hover,.open>.dropdown-toggle.btn-primary.focus,.open>.dropdown-toggle.btn-primary:focus,.open>.dropdown-toggle.btn-primary:hover{color:#fff; background-color:#A20000; border-color:#7f0000}

.btn-xl{color:#fff; background-color:#E00000; border-color:#E00000; border-radius:8px; font-size:14px; padding:10px 15px}
.btn-xl.active,.btn-xl:active,.btn-xl:focus,.btn-xl:hover,.open .dropdown-toggle.btn-xl{color:#fff;background-color:#f00;border-color:#f00}
.btn-xl.disabled,.btn-xl.disabled.active,.btn-xl.disabled:active,.btn-xl.disabled:focus,.btn-xl.disabled:hover,.btn-xl[disabled],.btn-xl[disabled].active,.btn-xl[disabled]:active,.btn-xl[disabled]:focus,.btn-xl[disabled]:hover,fieldset[disabled] .btn-xl,fieldset[disabled] .btn-xl.active,fieldset[disabled] .btn-xl:active,fieldset[disabled] .btn-xl:focus,fieldset[disabled] .btn-xl:hover{background-color:#E00000;border-color:#E00000}
.btn-xl .badge{color:#E00000;background-color:#fff}

.btn-custom,.portfolio-box .portfolio-box-caption{-webkit-transition:all .35s; -moz-transition:all .35s}


/*  N A V B A R  */
.navbar-default, a {-webkit-transition:all .35s;-moz-transition:all .35s}
.navbar-default {background-color:#fff; border-color:transparent; transition:all .35s}
.navbar-default .navbar-header .navbar-brand{color:#C00; font-weight:500; padding:5px 0 0 10px;}
.navbar-default .navbar-header .navbar-brand:focus,.navbar-default .navbar-header .navbar-brand:hover, .active{color:#C00;}
.navbar-default .navbar-header .navbar-toggle{border-color:#CCC; font-weight:500; font-size:13px; color:#655c5c; text-transform:uppercase; line-height:normal; padding:7px 9px 5px 9px; border-radius:4px;}
.navbar-default .navbar-header .navbar-toggle:hover, .navbar-default .navbar-header .navbar-toggle:focus{ background-color:#C00; border-color:#C00; color:#FFF;}
.navbar-default .nav>li>a,.navbar-default .nav>li>a:focus{text-transform:uppercase; font-weight:500; font-size:13px; color:#655c5c; margin-top:0;letter-spacing:1px; border-bottom:1px solid #EEE;}
.navbar-default .nav>li>a:focus:hover,.navbar-default .nav>li>a:hover{color:#C00;}
.navbar-default .nav>li.active>a,.navbar-default .nav>li.active>a:focus{color:#C00!important; background-color:transparent}
.navbar-default .nav>li.active>a:focus:hover,.navbar-default .nav>li.active>a:hover{background-color:transparent}

@media (min-width:768px){
.navbar-default { background-color:transparent;padding:10px 0;-webkit-transition:padding .3s;-moz-transition:padding .3s;transition:padding .3s; border:none}
.navbar-default .navbar-header .navbar-brand{font-size:2em;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s; padding:3px 0 0 0; margin:0;}
.navbar-default .navbar-header .navbar-brand:focus,.navbar-default .navbar-header .navbar-brand:hover{color:#fff}
.navbar-default .navbar-nav>.active>a{border-radius:3px}
.navbar-default .nav>li>a, .navbar-default .nav>li>a:focus{color:#FFF; font-weight:500; margin:0; text-shadow:1px 1px 2px #555; border:0} /* color:rgba(255,255,255,.7); */
.navbar-default .nav>li>a:focus:hover, .navbar-default .nav>li>a:hover{color:rgba(255,255,255,.7);}

.navbar-right { margin:0px;}

.navbar-default.affix{background-color:#fff; border-bottom:1px solid #F1F1F1;}
.navbar-default.affix .navbar-header .navbar-brand{color:#C00;font-size:13px;}
.navbar-default.affix .navbar-header .navbar-brand:focus,.navbar-default.affix .navbar-header .navbar-brand:hover{color:#DE0000}
.navbar-default.affix .nav>li>a,.navbar-default.affix .nav>li>a:focus{color:#655c5c; text-shadow:0px 0px 0px;}
.navbar-default.affix .nav>li>a:focus:hover,.navbar-default.affix .nav>li>a:hover{color:#C00; background-color:#F2F2F2; text-shadow:0;}
}

/*  H E A D E R  */
header{background-repeat:no-repeat;background-attachment:scroll;background-position:center bottom;-webkit-background-size:cover;-moz-background-size:cover;background-size:cover;-o-background-size:cover;text-align:center;color:#fff}
header .intro-text, header .intro-interno {padding-top:100px; padding-bottom:50px}
header .intro-text .intro-lead-in, header .intro-interno .intro-lead-in { font-family:"Crimson", "Times New Roman", Times, serif;font-style:italic;font-size:22px;line-height:22px;margin-bottom:25px}
header .intro-text .intro-heading, header .intro-interno .intro-heading{font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;text-transform:uppercase;font-weight:700;font-size:50px;line-height:50px;margin-bottom:25px}
@media (min-width:768px){
header .intro-text{padding-top:260px; padding-bottom:160px}
header .intro-text .intro-lead-in{font-family:"Crimson", "Times New Roman", Times, serif;font-style:italic;font-size:40px;line-height:40px;margin-bottom:25px;}
header .intro-text .intro-heading{font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;text-transform:uppercase;font-weight:700;font-size:75px;line-height:75px;margin-bottom:50px;}
header .intro-interno{padding-top:160px;padding-bottom:70px}
header .intro-interno .intro-lead-in{font-family:"Crimson", "Times New Roman", Times, serif;font-style:italic;font-size:24px;line-height:22px;margin-bottom:20px; font-weight:bold;}
header .intro-interno .intro-heading{font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;text-transform:uppercase;font-weight:700;font-size:75px;line-height:75px;}
}
@media (min-width:1280px){
header .intro-text{padding-top:310px; padding-bottom:210px}
}

.sombra-marrom { text-shadow:1px 2px 4px #533300;}
.sombra-azul { text-shadow:1px 2px 4px #035493;}
.sombra-verde { text-shadow:1px 2px 4px #324f0c;}
.sombra-marromc { text-shadow:1px 2px 4px #844204;}

.header-home {background-image: url("../img/bg-header-home.jpg");}
.header-servicos {background-image:url(../img/bg-header-servicos.jpg);}
.header-portfolio {background-image:url(../img/bg-header-portfolio.jpg);}
.header-portfolio-1 {background-image:url(../img/bg-header-portfolio-1.jpg);}
.header-portfolio-2 {background-image:url(../img/bg-header-portfolio-2.jpg);}
.header-portfolio-3 {background-image:url(../img/bg-header-portfolio-3.jpg);}
.header-portfolio-4 {background-image:url(../img/bg-header-portfolio-4.jpg);}
.header-logomarcas {background-image:url(../img/bg-header-logo.jpg);}
.header-obrigado {background-image:url(../img/bg-header-obrigado.jpg);}

section{padding:60px 0}
section h2.section-heading {font-size:42px;margin-top:0;margin-bottom:10px; color:#4f4848;}
section h2.section-heading-2 {font-size:42px; margin-top:0; margin-bottom:50px}
section h2.section-heading-3 {font-size:30px; margin-top:0; margin-bottom:24px}
section h2.section-heading-4 {font-size:18px; margin-top:0; margin:30px 0 30px; color:#666;}
section h3.section-subheading {font-size:20px;text-transform:none;font-weight:400;margin-bottom:60px}
section h3.section-subheading-2 {font-size:24px;text-transform:none;font-weight:400;margin-bottom:60px}
section h4.section-heading {font-size:16px; margin:0 0 35px; color:#4f4848; text-transform:none;}
.ajuste-1 { padding-bottom:35px;}
.ajuste-2 { padding-top:25px;}
@media (min-width:768px){
section{padding:90px 0 80px 0}
section h2.section-heading, section h2.section-heading-2 {font-size:54px;}
section h2.section-heading-3 {font-size:38px;}
.ajuste-1, .ajuste-2 { padding:0;}
}

.box-port {background-position: center center; background-repeat:no-repeat; background-size:cover; margin-bottom:25px; width:100%;}
/* background-image: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0)) */
.box-port a { color:#FFF; display:block; padding-top:300px; height:360px; background-image: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0))}
.box-port a:hover { color: #fec503;}
.box-port h6 {font-size:20px; text-transform:uppercase; font-weight:600; text-shadow:3px 3px 10px #000;}
.box-1 { background:url('../img/box-port-1.jpg');}
.box-2 { background:url('../img/box-port-2.jpg');}
.box-3 { background:url('../img/box-port-3.jpg');}
.box-4 { background:url('../img/box-port-4.jpg');}



.home-exp { font-size:16px; color:#666;}
.service-heading{margin:15px 0; text-transform:none; color:#4f4848;}
.tit-heading{margin:0 0 25px 0; text-transform:none; color:#C00;}

#portfolio .portfolio-item{margin:0 0 15px;right:0}
#portfolio .portfolio-item .portfolio-link{display:block;position:relative;max-width:400px;margin:0 auto}
#portfolio .portfolio-item .portfolio-link .portfolio-hover{background:rgba(51,51,51,.9);position:absolute;width:100%;height:100%;opacity:0;transition:all ease .5s;-webkit-transition:all ease .5s;-moz-transition:all ease .5s} /* background:rgba(254,209,54,.9) */
#portfolio .portfolio-item .portfolio-link .portfolio-hover:hover{opacity:1}
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content {position:absolute; width:100%; height:20px; font-size:20px; text-align:center; margin-top:-12px; color:#fff; font-weight:700;}
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content i{margin-top:-12px}
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h3,#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h4{margin:0}
#portfolio .portfolio-item .portfolio-caption{max-width:400px;margin:0 auto;background-color:#fff;text-align:center;padding:25px}
#portfolio .portfolio-item .portfolio-caption h4{text-transform:none;margin:0}
#portfolio .portfolio-item .portfolio-caption p{font-size:16px;margin:0}
footer span.copyright,footer ul.quicklinks{font-family:"Open Sans",Helvetica,Arial,sans-serif}
.top1 { top:50%;}
.top2 { top:40%;}
#portfolio *{z-index:2}
@media (min-width:767px){#portfolio .portfolio-item{margin:0 0 30px}
}

/*  I N T E R N O S  */
.sobre{text-align:center; background-color:#990000; color:#FFFFFF; padding-bottom:0; background:url(../img/bg-quem.png) repeat center;}
#sobre h4 { font-size:24px; text-transform:none; margin:36px 0 0 0;}
#sobre p.maior { font-size:18px; font-weight:400; line-height:42px;}
.servicos-inter img, .logos-inter img { width:100%; height:auto;}
.logos-inter img { border:1px solid #EFEFEF}
.logos-inter p { line-height:30px; margin-bottom:45px; text-align:center;}
.logos-inter p a { color:#888;}

#portfolio { background:url(../img/bg-home-port.gif) repeat}
#portfolio .portfolio-item .portfolio-caption p,section h3.section-subheading,section h3.section-subheading-2{font-family:"Crimson", "Times New Roman", Times, serif;font-style:italic}
aside.clients img{margin:50px auto}
.fa-1-5x { font-size: 1.5em; color:#e60000;}
img { vertical-align: middle;}
.no-gutter>[class*=col-]{padding-right:0;padding-left:0}
.passado { background:url(../img/bg-passado.png) top repeat-x}
.port-interno { padding:0;}
.port-interno-2 { padding:50px 0 40px;}
.text-bold { font-weight:bold;}

.citacao { padding:55px 0; background:url(../img/bg-citacao.jpg) no-repeat center center #ebdecd; background-size: auto 100%;}
.citacao h4, .citacao p { text-transform:none; text-align:center;}
.citacao h4 { font-family: 'Bilbo', cursive; font-weight:normal; font-size:38px; color:#900; padding-bottom:25px; line-height:48px;} 
.citacao p { font-weight:400; font-size:18px; color:#666666} 

.glossario { background:url(../img/bg-glossario.png) no-repeat #F5F5F5; text-align:center;}
.destaque { color:#C00; font-weight:600;}
.icone { width:50%; height:50%}
.ic-box { margin-bottom:30px}
@media (min-width:767px){
.ic-box { padding-bottom:0px}
.citacao { background-size: 100% auto;}
}

.container-foco { position: relative;}
.image-foco { display: block; width: 100%; height: auto; border:0;}
.overlay-foco { position: absolute; bottom: 0; left: 0; right: 0; background-color:rgba(0,0,0,0.7); overflow: hidden; width: 100%; height: 0; transition: .5s ease;}
.container-foco:hover .overlay-foco { height: 100%;}
.text-foco { color: white; font-size: 20px; position: relative; overflow: hidden; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); text-align:center; padding:0 15px;}

/* section#contato {background-color:#111;background-image:url(../img/map-image.png);background-position:center;background-repeat:no-repeat} */
section#contato { background: url("../img/bg-contato.jpg") no-repeat bottom center #100400; background-size: 100% auto;}
section#contato p { color:#FFFFFF; font-size:14px;}
section#contato p a { color:#F90; text-decoration:none;}
section#contato p a:hover { color:#F60; text-decoration:none;}
section#contato .section-heading, section#contato .section-heading-2 {color:#fff}
section#contato .form-group{margin-bottom:20px}
section#contato .form-group input,section#contato .form-group textarea{padding:12px 20px}
section#contato .form-group input.form-control{height:auto}
section#contato .form-group textarea.form-control{height:150px}
section#contato .form-control:focus{border-color:#fed136;box-shadow:none}
section#contato ::-webkit-input-placeholder{font-family:"Open Sans",Helvetica,Arial,sans-serif;text-transform:uppercase;font-weight:700;color:#ddd}
section#contato :-moz-placeholder{font-family:"Open Sans",Helvetica,Arial,sans-serif;text-transform:uppercase;font-weight:700;color:#ddd}
section#contato ::-moz-placeholder{font-family:"Open Sans",Helvetica,Arial,sans-serif;text-transform:uppercase;font-weight:700;color:#ddd}
section#contato :-ms-input-placeholder{font-family:"Open Sans",Helvetica,Arial,sans-serif;text-transform:uppercase;font-weight:700;color:#ddd}
section#contato .text-danger{color:#e74c3c}

footer{padding:15px 0; color:#ad7f6f; background-color:#000; font-size:13px;}
footer span.copyright{text-transform:uppercase;text-transform:none}
footer ul.quicklinks{margin-bottom:0;line-height:40px;text-transform:uppercase;text-transform:none}
.f1, .f2, .f3 { text-align:center; padding:10px 0;}
@media (min-width:767px){
section#contato p { font-size:16px;}
.f1 { text-align:left;}
.f2 { text-align:center;}
.f3 { text-align:right;}
.f1, .f2, .f3 { padding:0;}
}

ul.social-buttons{margin-bottom:0}
ul.social-buttons li a{display:block;background-color:#222;height:40px;width:40px;border-radius:100%;font-size:20px;line-height:40px;color:#fff;outline:0;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s}
ul.social-buttons li a:active,ul.social-buttons li a:focus,ul.social-buttons li a:hover{background-color:#fed136}
.btn.active,.btn:active,.btn:active:focus,.btn:focus{outline:0}

.portfolio-modal .modal-dialog{margin:0;height:100%;width:auto}
/*  .portfolio-modal .modal-content{border-radius:0;background-clip:border-box;-webkit-box-shadow:none;box-shadow:none;border:none;min-height:100%;padding:100px 0;text-align:center}  */
.portfolio-modal .modal-content{border-radius:0;background-clip:border-box;-webkit-box-shadow:none;box-shadow:none;border:none;min-height:100%;padding:25px 0 60px 0;text-align:center}
.portfolio-modal .modal-content h2 {margin-bottom:25px;font-size:3em; color:#C00;}
.portfolio-modal .modal-content p {margin-bottom:30px}
.portfolio-modal .modal-content p.item-intro{margin:20px 0 30px; font-family:"Crimson", "Times New Roman", Times, serif; font-style:italic; font-size:16px}
.portfolio-modal .modal-content ul.list-inline{margin-bottom:30px;margin-top:0}
.portfolio-modal .modal-content img{margin-bottom:30px}

.portfolio-modal .close-modal {position:absolute; width:50px; height:50px; top:25px; right:25px; cursor:pointer; cursor:hand; background-color:transparent; z-index:999;}
.portfolio-modal .close-modal:hover {opacity:.5}
<!-- .portfolio-modal .close-modal{position:absolute; width:75px; height:75px; background-color:transparent; top:25px; right:25px; cursor:pointer; cursor:hand;} -->
<!-- .portfolio-modal .close-modal .lr {height:75px; width:1px; margin-left:35px; background-color:#222; transform:rotate(45deg); -ms-transform:rotate(45deg); -webkit-transform:rotate(45deg); z-index:1051} -->
<!-- .portfolio-modal .close-modal .lr .rl{height:75px;width:1px;background-color:#222;transform:rotate(90deg);-ms-transform:rotate(90deg);-webkit-transform:rotate(90deg);z-index:1052} -->

.portfolio-modal .modal-backdrop{opacity:0;display:none}
.portfolio-modal .modal-body { text-align:left}
.portfolio-modal .modal-body p { margin-bottom:10px;}
.portfolio-modal .modal-body-2 { text-align:center}
.portfolio-modal .modal-body-2 p { margin-bottom:10px;}
.portfolio-modal .modal-body-2 p.legenda { margin-bottom:55px; color:#666; font-style:italic;}
.portfolio-modal .modal-body-2 img { text-align:center; line-height:normal; margin:0 0 5px 0; padding:0}
.portfolio-modal .modal-body-2 a { color:#900; text-decoration:none;}
.portfolio-modal .modal-body-2 a:hover { color:#C00; text-decoration:none;}
@media (max-width:620px){
.portfolio-modal .modal-body-2 img { width:100%; height:auto; text-align:center;}
}

::-moz-selection{text-shadow:none;background:#999}
::selection{text-shadow:none;background:#999}
img::selection{background:0 0}
img::-moz-selection{background:0 0}

.filter-grayscale {filter:grayscale(100%)}
.filter-grayscale:hover { filter:none}
.img-passado { padding:15px 0}

/*   F I L T R O S   E   P O R T F O L I O   */
#filters {margin:35px 0; padding:0; list-style:none;}
#filters li {float:left;}
#filters li span {display: block; padding:7px 20px;	text-decoration:none; color:#655c5c; cursor: pointer;}
#filters li span.active {background:#C00; color:#fff; border-radius:7px;}

#portfoliolista .portfolio {-webkit-box-sizing: border-box;-moz-box-sizing: border-box; -o-box-sizing: border-box; margin:0; float:left; display:none;overflow:hidden;}
/* #portfoliolista .portfolio {-webkit-box-sizing: border-box;-moz-box-sizing: border-box; -o-box-sizing: border-box; width:19%; margin:1%; float:left; display:none;overflow:hidden;} */
.portfolio-wrapper { overflow:hidden; position: relative !important; background:#C00; cursor:pointer;}
.portfolio img { max-width:100%; position: relative; top:0; -webkit-transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1);}
.portfolio .lab { position: absolute; width: 100%; height:50px; bottom:-50px; -webkit-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);	}
.portfolio .lab-bg {background: #C00; width: 100%; height:100%; position: absolute; top:0; left:0;}
.portfolio .lab-text { color:#fff; position: relative; z-index:500; padding:5px 8px 0px 8px; font-weight:600; font-size:14px}
.portfolio .lab-text a.text-title { color:#FFFFFF; text-decoration:none;}
.portfolio .lab-text a.text-title:hover { color:#FFFFFF; text-decoration:none;}
.portfolio .text-category { display:block; font-size:10px; font-weight:400; margin:0;}
.portfolio:hover .lab { bottom:0;}
.portfolio:hover img { top:-30px;}  

/* Self Clearing Goodness */
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix:before, .clearfix:after, .row:before, .row:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }
.row:after, .clearfix:after { clear: both; }
.row, .clearfix { zoom: 1; }
.clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0;}

.bt-p {margin:0 5px 20px;}

/*  B A C K   T O   T O P  */
.cd-top { display: inline-block; height: 40px; width: 40px; position: fixed; bottom: 30px; right: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); border-radius:50%;
 /* image replacement properties */
  overflow: hidden; text-indent: 100%; white-space: nowrap; background: rgba(0,0,0, 0.3) url(../img/cd-top-arrow.svg) no-repeat center 50%; visibility: hidden; opacity: 0;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s; -moz-transition: opacity .3s 0s, visibility 0s .3s; transition: opacity .3s 0s, visibility 0s .3s;}
.cd-top.cd-is-visible, .cd-top.cd-fade-out {-webkit-transition: opacity .3s 0s, visibility 0s 0s; -moz-transition: opacity .3s 0s, visibility 0s 0s; transition: opacity .3s 0s, visibility 0s 0s;}
.cd-top:hover { background-color:rgba(255,0,0,.5); -webkit-transition: opacity .3s 0s, visibility 0s 0s; -moz-transition: opacity .3s 0s, visibility 0s 0s; transition: opacity .3s 0s, visibility 0s 0s;}
.cd-top.cd-is-visible { /* the button becomes visible */ visibility: visible; opacity: 1;}
.cd-top.cd-fade-out { /* if the user keeps scrolling down, the button is out of focus and becomes less visible */ opacity: .5;}
.no-touch .cd-top:hover {background-color: #e86256; opacity: 1;}
@media only screen and (min-width: 768px) { .cd-top { right: 20px; bottom: 20px;}}
@media only screen and (min-width: 1024px) { .cd-top { height: 50px; width: 50px; right: 20px; bottom: 20px;}}

/*  L O A D E R  */
#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 80px;
  height: 80px;
  margin: -40px 0 0 -40px;
  border: 5px solid #f3f3f3;
  border-radius: 50%;
  border-top: 5px solid #C00;
  border-bottom: 5px solid #C00;
  width: 70px;
  height: 70px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}

#myDiv {
  display: none;
}