@import url("https://use.typekit.net/jht7fwn.css");

/* *********************************************************
**
**
** COMMON
**
**
********************************************************* */

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

a{
    color: #ee2c24;
}

a[target="_blank"]{
    color: #ee2c24;
    transition: all .5s ease;
}
a[target="_blank"]:hover{
    color: black;
}

h1,h2,h3,h4,h5,h6{
    font-family: obvia, sans-serif;
    font-weight: 400;
    font-style: normal;
    color: black;
}
h1 > *, h2 > *, h3 > *{
    color: #000 !important;
}

p{
    font-family: obvia, sans-serif;
    font-weight: 300;
    font-style: normal;
    color: #777;
}

p > strong{
    font-weight: 500;
}

.bigbody *{
    font-size: 24px !important;
    line-height: 48px;
}

.center{
    text-align: center;
}

.decolorize{
    filter: grayscale(100%);
}
.lighten{
    /*filter: brightness(133%);*/
    filter: grayscale(1) brightness(2);
}

/* *********************************************************
**
**
** CONTINUE BUTTON
**
**
********************************************************* */

#continue{
	position:absolute;
	bottom:70px;
	left:calc(50% - 11px);
    cursor: pointer;
    text-align: center;
}

#continue *{
    text-align: center;
    color: black;
    font-size: 36px;
}


/* *********************************************************
**
**
** LOADERS
**
**
********************************************************* */


#loader{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100vh;
    background-color: white;
    z-index: 999;
    opacity: 1;
    transition: all .5s ease;
}
#loader.hidden{
    opacity: 0;
    top:-100vh;
}



/* *********************************************************
**
**
** MAIN CONTAINER
**
**
********************************************************* */

/*
.homecontainer{
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior:smooth;
    z-index: 1;
}
*/
/*.homecontainer::-webkit-scrollbar{
    display: none;
}*/



/* *********************************************************
**
**
** HEADER
**
**
********************************************************* */


#header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9;
    opacity: .9;
    transition: all .5s ease;
    background-color: #FFF;
}
#header.scroll{
    opacity: 0;
    top:-120px;
}

#logo{
    position: absolute;
    height: 50px;
    cursor: pointer;
}

#bullet{
    position: absolute;
    height: 50px;
    cursor: pointer;
}

#menu{
    position: absolute;
    width: 36px;
    height: 36px;
    cursor: pointer;
}


#menu > div{
    position: absolute;
    top: 11px;
    left: 0px;
    height: 2px;
    width: 100%;
    background-color: #666;
    transition: all .3s ease;
    z-index: 999;
    
}
#menu:hover > div{
    background-color: #000;
    height: 2px;
    transform: rotate(-180deg);
}

#menu > div::before, #menu > div::after{
    position: absolute;
    left: 0px;
    content: "";
    height: 2px;
    width: 100%;
    background-color: #666;
}
#menu > div::before{
    top:-10px;
    transition: all .11s ease;
    transform: rotate(0deg);
}
#menu > div::after{
    top: 10px;
    transition: all .11s ease .08s;
    transform: rotate(0deg);
}

#menu:hover > div::before{
    width: 50%;
    /*right: 50%;*/
    left:9px;
    background-color: #000;
    transform: rotate(90deg);
    height: 2px;
}
#menu:hover > div::after{
    width: 50%;
    /*left: 50%;*/
    left: 9px;
    background-color: #000;
    transform: rotate(-90deg);
    height: 2px;
}

#menu-panel{
    position: fixed;
    top: -100vh;
    left: 0px;
    height: 100vh;
    width: 100%;
    z-index: 99;
    opacity: 0;
    background-color: #FFF0F0;
    transition: all .4s ease;
    padding: 20px;
}
#menu-panel.hidden{
    top: -100vh;
    opacity: 0;
}
#menu-panel.show{
    top: 0px;
    opacity: .95;
}

#menu-buttons-wrapper{
    display: table;
    height: 100%;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}
#menu-buttons{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
#menu-buttons ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
#menu-buttons ul li a{
    font-family: obvia, sans-serif;
    font-weight: 400;
    font-style: normal;
    cursor: pointer;
    color: black;
    transition: all .5s ease;
    text-decoration: none;
    letter-spacing: normal;
}

#menu-buttons ul li a:hover{
    color: #ee2c24;
}


#closemenu{
    /*position: absolute;
    top: 20px;
    left: calc(50% - 21px);*/
    display: inline-block;
    font-size: 42px;
    text-align: center;
    line-height: 32px;
    height: 42px;
    width: 42px;
    border: black 3px solid;
    border-radius: 50%;
    cursor: pointer;
    color: black;
    transition: all .2s ease;
    background-color: #fcf1f0;
}
#closemenu:hover{
    color: #ee2c24;
    border: #ee2c24 3px solid;
    border-radius: 3%;
    background-color: #FFF;
}

@media only screen {
    #header{
        height: 66px;
        line-height: 66px;
    }
    #logo{
        display: none;
        left: 10px;
        top: 12px;
    }
    #bullet{
        display: block;
        left: 10px;
        top: 8px;
    }
    #menu{
        right: 20px;
        top: 22px;
    }
    #menu-buttons ul li a{
        line-height: 64px;
        font-size: 20px;
    }
    #menu-buttons ul li a:hover{
        font-size: 24px;
    }
}

@media only screen and (min-width: 576px) {
	
}

@media only screen and (min-width: 768px) {
    #header{
        height: 100px;
        line-height: 100px;
    }
	#logo{
        display: block;
        left: 50px;
        top: 22px;
    }
    #bullet{
        display: none;
        left: 50px;
        top: 22px;
    }
    #menu{
        right: 50px;
        top: 32px;
    }
    #menu-buttons ul li a{
        line-height: 64px;
        font-size: 24px;
    }
    #menu-buttons ul li a:hover{
        font-size: 32px;
    }
}

@media only screen and (min-width: 992px) {
	#menu-buttons ul li a{
        line-height: 90px;
        font-size: 54px;
    }
    #menu-buttons ul li a:hover{
        font-size: 64px;
    }
}

@media only screen and (min-width: 1200px) {
	
}

@media only screen and (min-width: 1400px) {
	
}




/* *********************************************************
**
**
** PANEL SECTION COMMON
**
**
********************************************************* */

/*
.panelsection{
    position: relative;
    display: block;
    height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}
*/

/* *********************************************************
**
**
** HOME
**
**
********************************************************* */

.asset-title *{
    font-family: obvia, sans-serif;
    font-weight: 500;
    font-style: italic;
    color: #000;
}

.asset-body *{
    font-family: obvia, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 15px;
}

.asset-ref-link{
    font-family: obvia, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 16px;
    color: #ee2c24;
    text-decoration: none;
    transition: all .3s ease;
    background-color: #ffeaea;
    padding: 12px 16px;
    transform: scale(1);
    
}
.asset-ref-link:hover{
    color: #000;
    text-decoration: underline;
    background-color: #ffeaea;
    padding: 12px 16px;
    transform: scale(1.05);
}

.service-quote{
    color:#ffeaea;
}

.service-title{
    font-family: obvia, sans-serif;
    font-weight: 500;
}

.service-body *{
    font-family: obvia, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 15px;
}

@media only screen {
    
    .asset-title *{
        font-size: 18px;
    }
    .service-quote{
        font-size:28px;
    }
}

@media only screen and (min-width: 576px) {
	
}

@media only screen and (min-width: 768px) {
    .asset-title *{
        font-size: 24px;
    }
    .service-quote{
        font-size:32px;
    }
}

@media only screen and (min-width: 992px) {
	.service-quote{
        font-size:48px;
    }
}

@media only screen and (min-width: 1200px) {
	
}

@media only screen and (min-width: 1400px) {
	
}

/* *********************************************************
**
**
** OPENER
**
**
********************************************************* */

.opener{
    position: relative;
    display: flex;
    background-color: #FFF0F0;
}



.opener-image{
    opacity: 0;
    overflow: hidden;
}

/*
.thiselement{
    position: absolute;
}
*/


.opener-headline{
    font-family: obvia, sans-serif;
    font-weight: 600;
    font-style: normal;
    opacity: 0;
}

.opener-body{
    font-family: obvia, sans-serif;
    font-weight: 400;
    font-style: normal;
    opacity: 0;
}

.opener-body p{
    color: #444;
}


.opener-link{
    display: inline-block;
    font-family: obvia, sans-serif;
    font-weight: 400;
    font-style: normal;
    background-color: #ee2c24;
    color: #FFF;
    text-decoration: none;
    transition: all .3s ease;
    opacity: 0;
}

.opener-link:hover{
    background-color: #000;
    color: #FFF;
}

.keepscrolling{
    position: absolute;
    left: 0px;
    bottom: 20px;
}

.keepscrollingimg{
    height: 40VH;
}


@media only screen {
    .opener{
        margin-top: 66px;
        height: calc(100vh - 66px);
    }
    .opener-headline h1{
        font-size: 20px;
    }
    .opener-body *{
        font-size: 16px;
        line-height: 32px;
    }
    .opener-link{
        font-size: 18px;
        padding: 10px 20px;
    }
}

@media only screen and (min-width: 576px) {
	
}

@media only screen and (min-width: 768px) {
    .opener{
        margin-top: 0px;
        height: 100vh;
    }
	.opener-headline h1{
        font-size: 32px;
    }
    .opener-body *{
        font-size: 20px;
        line-height: 42px;
    }
    .opener-link{
        font-size: 20px;
        padding: 10px 20px;
    }
}

@media only screen and (min-width: 992px) {
    .opener-headline h1{
        font-size: 36px;
    }
    .opener-link{
        font-size: 18px;
        padding: 10px 20px;
    }
}

@media only screen and (min-width: 1200px) {
    .opener-headline h1{
        font-size: 48px;
    }
}

@media only screen and (min-width: 1400px) {
	
}

@media only screen and (min-width: 1900px) {
	
}











/* *********************************************************
**
**
** INTRO
**
**
********************************************************* */

.panel-intro{
    position: relative;
    width: 100%;
    height: 100vh;
}

#intro{
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

#intro-curtain{
	position:absolute;
	top:0px;
	left:0px;
	bottom:0px;
	right:0px;
	min-width:100%;
	min-height:100%;
	background-color:rgba(0, 0, 0, 0);
    z-index: -1;
}

#intro-background{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -2;
}

.intro-wrapper{
    display: table;
    height: 100%;
    margin: 0 auto;
}

#intro-main{
    width: 100%;
    display: table-cell;
    vertical-align: middle;
}

.intro-headline{
    font-family: obvia, sans-serif;
    font-weight: 600;
    font-style: normal;
    opacity: 0;
}
.intro-body{
    font-family: obvia, sans-serif;
    font-weight: 400;
    font-style: normal;
    opacity: 0;
}

.intro-headline *{
    color: white;
    font-weight: 600;
}
.intro-body *{
    color: white;
    font-weight: 400;
}



#intro-images img{
    opacity: 0;
}




@media only screen {
    .intro-wrapper{
        width: 80%;
    }
    #intro-main{
        text-align: center;
    }
    .intro-headline{
        font-size: 18px;
    }
    .intro-body{
        font-size: 16px;
    }
    #intro-images{
        text-align: center;
    }
    #intro-images img{
        max-height: 50vh;
    }
}

@media only screen and (min-width: 576px) {
	
}

@media only screen and (min-width: 768px) {
	#intro-main{
        text-align: center;
    }
    .intro-headline{
        font-size: 22px;
    }
    .intro-body{
        font-size: 18px;
    }
}

@media only screen and (min-width: 992px) {
    .intro-wrapper{
        width: 50%;
    }
}

@media only screen and (min-width: 1200px) {
    
}

@media only screen and (min-width: 1400px) {
	
}

@media only screen and (min-width: 1900px) {
	
}



/* *********************************************************
**
**
** NEWS
**
**
********************************************************* */

#news{
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #FFE2E2;
}

.news-wrapper{
    display: table;
    height: 100%;
    width: 100%;
}

#news-main{
    width: 100%;
    display: table-cell;
    vertical-align: middle;
}

.news-headline{
    font-family: obvia, sans-serif;
    font-weight: 300;
    font-style: normal;
    color: black;
    opacity: 0;
}
.news-body{
    font-family: obvia, sans-serif;
    font-weight: 200;
    font-style: normal;
    color: black;
    opacity: 0;
}

#news-images img{
    opacity: 0;
}


@media only screen {
    #news-main{
        text-align: center;
    }
    .news-headline{
        font-size: 18px;
    }
    .news-body{
        font-size: 16px;
    }
    #news-images{
        text-align: center;
    }
    #news-images img{
        max-height: 50vh;
    }
}

@media only screen and (min-width: 576px) {
	
}

@media only screen and (min-width: 768px) {
	#news-main{
        text-align: center;
    }
    .news-headline{
        font-size: 24px;
    }
    .news-body{
        font-size: 18px;
    }
}

@media only screen and (min-width: 992px) {
	#news-main{
        text-align: right;
    }
    .news-headline{
        font-size: 24px;
    }
    .news-body{
        font-size: 22px;
    }
    #news-images{
        text-align: left;
    }
    #news-images img{
        max-height: 60vh;
    }
}

@media only screen and (min-width: 1200px) {
	#news-main{
        text-align: right;
    }
    .news-headline{
        font-size: 32px;
    }
    .news-body{
        font-size: 24px;
    }
}

@media only screen and (min-width: 1400px) {
	.news-headline{
        font-size: 32px;
    }
    .news-body{
        font-size: 24px;
    }
}

@media only screen and (min-width: 1900px) {
	.news-headline{
        font-size: 36px;
    }
    .news-body{
        font-size: 24px;
    }
}



/* *********************************************************
**
**
** PORTFOLIO
**
**
********************************************************* */

#portfolio{
    position: relative;
    width: 100%;
    height: 100vh;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.portfolio-wrapper{
    height: 100%;
}

#portfolio-main{
    display: block;
    height: calc(100vh - 100px);
    margin-top: 100px;
}

.portfolio-headline{
    font-family: obvia, sans-serif;
    font-weight: 300;
    font-style: normal;
    color: rgb(182, 182, 182);
}
.portfolio-body{
    font-family: obvia, sans-serif;
    font-weight: 200;
    font-style: normal;
    color: rgb(182, 182, 182);
}

#portfolio-carousel{
    background-color: white;
    height: 100%;
    max-height: 66vh;
    
}

.carousel-inner, .carousel-item, .carourow{
    height: 100%;
}

.carousel-item img{
    height: 100%;
    display: block;
}




@media only screen {
    #portfolio-main{
        text-align: center;
    }
    .portfolio-headline{
        font-size: 18px;
    }
    .portfolio-body{
        font-size: 16px;
    }
    .caroucol{
        height: auto;
    }
}

@media only screen and (min-width: 576px) {
	
}

@media only screen and (min-width: 768px) {
	#portfolio-main{
        text-align: center;
    }
    .portfolio-headline{
        font-size: 22px;
    }
    .portfolio-body{
        font-size: 18px;
    }
}

@media only screen and (min-width: 992px) {
	#portfolio-main{
        text-align: center;
    }
    .portfolio-headline{
        font-size: 24px;
    }
    .portfolio-body{
        font-size: 22px;
    }
    .caroucol{
        height: 100%;
    }
}

@media only screen and (min-width: 1200px) {
	#portfolio-main{
        text-align: center;
    }
    .portfolio-headline{
        font-size: 32px;
    }
    .portfolio-body{
        font-size: 26px;
    }
}

@media only screen and (min-width: 1400px) {
	.portfolio-headline{
        font-size: 36px;
    }
    .portfolio-body{
        font-size: 26px;
    }
}

/* *********************************************************
**
**
** REFERENCES
**
**
********************************************************* */

.container-custom{
    max-width: 1920px;
    margin: 0 auto;
}

.reference-img-wrapper{
    background-color: #ffeaea;
    transition: all 0.3s ease-in-out;
    box-shadow: #EEE 0px 0px 0px;
}

.reference-img-wrapper:hover{
    /* transform size */
    transform: scale(1.05);
    box-shadow: #EEE 0px 0px 30px;
}

.reference-title, .reference-title *{
    font-family: obvia, sans-serif;
    font-weight: 500;
    font-style: normal;
}

.ref-summary{
    font-weight: 200;
}

.ref-ref-link{
    color: #ee2c24;
    text-decoration: none;
}

.projectarrow{
	display: block;
	width: 100%;
	height: 100%;
	color:#999;
    text-decoration: none;
}

.projectarrow:hover{
    color:#ee2c24;
    text-decoration: none;
}

/* *********************************************************
**
**
** BLOG
**
**
********************************************************* */

.blog-post-link-title{
    text-decoration: none;
}

.blog-post-link-title *{
    font-family: obvia, sans-serif;
    font-weight: 300;
    font-style: italic;
    color: #000;
}

.blog-post-body p{
    font-family: obvia, sans-serif;
    font-weight: 200;
    font-style: normal;
    color: #777;
}


@media only screen {
    .blog-post-link-title *{
        font-size: 18px;
    }
    .blog-post-body p{
        line-height: 28px;
    }
}


@media only screen and (min-width: 768px) {
	.blog-post-link-title *{
        font-size: 20px;
    }
    .blog-post-body p{
        line-height: 32px;
    }
}

@media only screen and (min-width: 992px) {
	.blog-post-link-title *{
        font-size: 24px;
    }
}





/* *********************************************************
**
**
** BUTTONS
**
**
********************************************************* */


.next-button, .prev-button{
    display: inline-block;
    position: absolute;
    bottom:50px;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border: #000 2px solid;
    z-index: 3;
    overflow: hidden;
    border-radius: 50%;
}

.next-button > div.black, .prev-button > div.black{
    position: absolute;
    top: -32px;
    left: 0px;
    width: 32px;
    height: 32px;
    background-color: #ee2c24;
    z-index: 2;
    transition: all .3s ease .15s;
    border-radius: 0%;
    opacity: 0;
}
.next-button:hover > div.black, .prev-button:hover > div.black{
    top:0px;
    opacity: 1;
}

.next-button > div.red, .prev-button > div.red{
    position: absolute;
    top: -32px;
    left: 0px;
    width: 32px;
    height: 32px;
    background-color: #000;
    /*border: #f00 2px solid;*/
    z-index: 1;
    transition: top .12s ease 0s;
    border-radius: 0%;
}
.next-button:hover > div.red, .prev-button:hover > div.red{
    top:0px;
}


.next-button::before, .prev-button::before{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 32px;
    height: 34px;
    text-align: center;
    line-height: 34px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f078";
    font-size: 18px;
    color: #000;
    transition: color .5s ease;
    z-index: 4;
}
.prev-button::before{
    content: "\f077";
    height: 32px;
    line-height: 32px;
}
.next-button:hover::before, .prev-button:hover::before{
    color: #FFF;
}



.service-button {
    background-color: #ee2c24;
    color: white;
    border: none;
    padding: 12px 16px;
    font-size: 15px;
    cursor: pointer;
    transition: all .3s ease;
    text-decoration: none;
  }
  
  .service-button:hover {
    background-color: black;
    color: white;
  }
  


  .just-a-link{
    display: inline-block;
    font-family: obvia, sans-serif;
    font-weight: 400;
    font-style: normal;
    background-color: #ee2c24;
    color: #FFF;
    text-decoration: none;
    transition: all .3s ease;
}

.just-a-link:hover{
    background-color: #000;
    color: #FFF;
}




@media only screen {
    .next-button, .prev-button{
        left: calc(50% - 18px);
    }
    .just-a-link{
        font-size: 24px;
        padding: 10px 20px;
    }
}

@media only screen and (min-width: 576px) {
	
}

@media only screen and (min-width: 768px) {
	.next-button, .prev-button{
        left: 58px;
    }
}

@media only screen and (min-width: 992px) {
	
}

@media only screen and (min-width: 1200px) {
	
}

@media only screen and (min-width: 1400px) {
	
}


/* *********************************************************
**
**
** FOOTER
**
**
********************************************************* */

.contact-url{
    color: #ee2c24;
    text-decoration: none;
    padding: 16px 16px;
    background-color: #ffe2e2;
    line-height: 32px;
    transition: all .3s ease;
}

.contact-url:hover{
    background-color: #ffe2e2;
    color: #000;
}

.contact-address *{
    text-decoration:none;
    color:#ee2c24 !important;
}

#footer{
    position: relative;
    width: 100%;
}

#footlogo{
    height: 40px;
    cursor: pointer;
}

.foot-slogan{
    font-family: obvia, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 14px;
}

.foot-link{
    font-family: obvia, sans-serif;
    font-weight: 300;
    font-style: normal;
    color: #999;
    text-decoration: none;
    transition: all .3s ease;
    background-color: #FFF;
    line-height: 36px;
}

.foot-link:hover{
    color: #ee2c24;
    background-color: #FFE2E2;
}


/*******************************************************************/
/*                                                                 */
/* PAGINATOR                                                   */
/*                                                                 */
/*******************************************************************/

.MarkupPagerNav {
    clear: both;
    margin: 15px 0px 15px 0px;
    font-family: var(--base-font-family);
    padding: 0;
}
.MarkupPagerNav li {
    display: inline;
    list-style: none;
    margin: 0;
}

.MarkupPagerNav li a,
.MarkupPagerNav li.MarkupPagerNavSeparator {
    display: block;
    float: left;
    padding: 5px 13px;
    color: #666;
    border: #ccc 1px solid;
    margin-right: 6px;
    font-size: 15px;
    font-weight: 400;
    text-transform: uppercase;
    border-radius: 40px;
    height: 36px;
    width: 36px;
}

.MarkupPagerNav li.MarkupPagerNavOn a,
.MarkupPagerNav li a:hover {
    color: #000000;
    border: #000000 1px solid;
    text-decoration: none;
}

.MarkupPagerNav li.MarkupPagerNavSeparator {
    display: inline;
    color: #fff;
    background: #5c8b93;
    padding-left: 3px;
    padding-right: 3px;
}



/**************************************************************************************
**
** vibratingDiv
**
***************************************************************************************/

#vibratingDiv {
    width: 100px;
    height: 100px;
    position: relative;
}

.vibrate {
    animation: vibratingAnimation 0.5s ease-in-out;
}

@keyframes vibratingAnimation {
    0% {
        transform: translate(0, 0);
    }
    20% {
        transform: translate(-5px, -5px);
    }
    40% {
        transform: translate(5px, -5px);
    }
    60% {
        transform: translate(-5px, 5px);
    }
    80% {
        transform: translate(5px, 5px);
    }
    100% {
        transform: translate(0, 0);
    }
}


/**************************************************************************************
**
** BACK TO TOP
**
***************************************************************************************/

/* https://codyhouse.co/gem/back-to-top/ */

.cd-top {
    display: inline-block;
    height: 40px;
    width: 40px;
    position: fixed;
    bottom: 40px;
    right: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    /* image replacement properties */
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    /*background: rgba(232, 98, 86, 0.8) url(../gfx/cd-top-arrow.svg) no-repeat center 50%;*/
    background: rgba(0, 0, 0, 0.8) url(../gfx/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;
    border-radius: 40px;
  }
  .cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
    -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: 60px;
      width: 60px;
      right: 30px;
      bottom: 30px;
    }
  }