#bubbles_canvas{
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
	z-index: 2;
}

#fromortoex{
	color: #ffffff;
	font-size: 4.3rem;
	font-family: 'tt_chocolates_trllight';
	line-height: 4rem;
	padding-top: 6.5rem;
    padding-bottom: 6.5rem;
	
}

#fromortoex .bold{
	font-family: 'tt_chocolates_trlbold';
}

#fromortoex .italic{
	font-family: 'tt_chocolates_trlbold_italic';
}

#whatwedo_canvas{
	position: absolute;
}

.gallery-cell{
	width: 100%;
	display: flex;
    justify-content: center;
    align-items: center;
}

#wrapdonut{
	height: 42rem;
    display: flex;
    align-items: center;
}

#wrapgallerydonut{
	width: 100%;
	padding: 0 6rem;
	z-index: 3;
}

.twofloatimg{
	width: 100%;
}

.dna-container .top .message .content .title {
    display: block;
    text-align: left;
    font-family: "Chocolates";
    font-weight: bold;
    color: white;
    font-size: 30pt;
    padding-bottom: 5%;
}

.dna-container .top .message .content .body {
    display: block;
    text-align: left;
    font-family: "Chocolates";
    color: white;
    font-size: 25pt;
}

.title{
	font-family: 'tt_chocolates_trlbold';
	color: #ffffff;
	font-size: 2rem;
}

.body{
	font-family: 'tt_chocolates_trlregular';
	color: #ffffff;
	font-size: 1.8rem;
	line-height: 2.5rem;
	padding: 3px;
}

.flickity-prev-next-button {
    width: 35px!important;
    height: 35px!important;
}

.flickity-page-dots {
    bottom: -50px!important;
	left: 0;
}

#dna_div{
	position: absolute;
	/*bottom: 0;*/
	width: 100%;
}

.messagedna{
	padding: 21rem 0;
}

.carousel{
	z-index: 1;
    /*margin-top: -70px;*/
}

.carousel img {
    display: block;
    height: 500px;
    min-width: 500px;
    object-fit: cover;
	padding:0px;
}

#dnasection{
	/*z-index: 2;*/
}

#twocards{
	z-index: 2;
}
.carousel .flickity-page-dots{
	bottom: 30px!important;
}



.fade-out-t {
    opacity: 0;
    transition: opacity 5s ease-out;
}

.fade-out-tlogo {
    opacity: 0;
    transition: opacity 3s ease-out;
}

.fade-in-t {
    opacity: 1!important;
}

.minoripad{
	display: none;
}

.mayoripad{
	display: block;
}



/*XX-Large devices (larger desktops, 1400px and down)*/
@media (max-width: 1400px) {
	#wrapdonut {
		height: 38rem;
	}
}

/*X-Large devices (large desktops, 1200px and down)*/
@media (max-width: 1200px) {
	#wrapdonut {
		height: 37rem;
	}
}

/*Large devices (desktops, 992px and down)*/
@media (max-width: 992px) {
	#wrapdonut {
		height: 36rem;
	}
}
/*Medium devices (tablets, 768px and down)*/
@media (max-width: 768px) {
	#wrapdonut {
		height: 34rem;
	}
	.twofloatimg:first-child{
		margin-bottom: 25px;
	}

	#dna_div{
		/*display: none;*/
		position: relative;
	}

	.carousel{
		margin-top: 0px;
	}

	.messagedna{
		padding: 3rem 0 1rem 0;
	}

	.minoripad{
		display: block;
	}

	.mayoripad{
		display: none;
	}
}

@media (max-width: 699px) {
	#wrapdonut {
		height: 42rem;
		display: block;
	}

	#whatwedo_canvas {
        bottom: unset;
        top: 70px;
        margin: auto;
    }
}

/*Small devices (landscape phones, 576px and down)*/
@media (max-width: 576px) { 
	#wrapdonut {
		height: 31rem;
	}

	#whatwedo_canvas {
        bottom: unset;
        top: 20px;
        margin: auto;
    }

	.twofloatimg{
		width: 94%;
	}

	.messagedna{
		padding: 1rem 2rem 1rem 2rem;
	}
	
	.flickity-prev-next-button.previous {
		left: 5px!important;
	}

	.flickity-prev-next-button.next {
		right: 5px!important;
	}


	
}


/*Small devices (landscape phones, 420px and down)*/
@media (max-width: 420px) { 
	
	#fromortoex{
		padding-top: 4rem;
		padding-bottom: 4rem;
	}

	.carousel img {
		height: 420px;
		min-width: 420px;
	}

	#whatwedo_canvas {
		bottom: unset;
		top: 70px;
		margin: auto;
	}
}

/*Small devices (landscape phones, 375px and down)*/
@media (max-width: 375px) { 
	.carousel img {
		height: 375px;
		min-width: 375px;
	}
}