/*
Theme Name: MayeCreate Child
Theme URI: http://www.mayecreate.com/
description: MayeCreate Design Child Theme
Author: Tyler Ernst, Rebecca Thomas, Creative Director Monica Pitts
Author URI: http://www.mayecreate.com/
Template: mayecreate-theme
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

font-family: 'Bai Jamjuree', sans-serif;
font-family: 'Lato', sans-serif;

*/

/* NOTE TO THE THEME DEV: DONT FORGET TO CHANGE THE SCREENSHOT.PNG TO A SCREENSHOT OF THE CLIENT SITE */

#homeContentWrap, #contentwrap {
    min-height: 500px;
    padding-top: 0 !important;
}

#page {
	position: relative;
	overflow: hidden;
}

#page:after {
	 background: url(img/road-left.png) left center no-repeat;
    width: 300px;
    height: 1060px;
    background-size: contain;
    max-height: 1060px;
    position: absolute;
    bottom: 500px;
    left: 0;
    content: '';
    display: block;
}

#pagewrapper {
	position: relative;
	overflow: hidden;
}

#pagewrapper:after {
	position: absolute;
	width: 100%;
	bottom: 0;
	left: 0;
	background: rgb(209,209,209);
    background: linear-gradient(0deg, rgba(209,209,209,1) 0%, rgba(209,209,209,1) 30%, rgba(255,255,255,1) 100%);
	height: 850px;
	max-height: 30%;
	content: '';
	z-index: -999;
}

#roadrotate {
       background: url(img/road.png) left center no-repeat;
    width: 1400px;
    height: 1400px;
    background-size: contain;
    max-height: 1400px;
    position: absolute;
    top: 500px;
    left: 70%;
    content: '';
    display: block;
}

.post-template-default.single .site.container {
    max-width: 1265px;
    width: 90%;
	margin: 0 auto;
}

.container {
    max-width: 1430px;
    width: 95%;
}

.pagebreak .container {
    position: relative;
    z-index: 2;
     max-width: 1630px;
    width: 95%;
    margin: 0 auto;
}
.pagebreak .pagebreak_left_img, .pagebreak .pagebreak_right_img {
	background-position: top center;
}
.site-footer #block-2 img {
	max-width: 240px;
}
.spacer {
	margin-bottom: 30px;
}
.photo_gallery_wrapper img {
	display: block;
	margin: 0 auto 30px;
}
.min-h a {
	min-height: 315px;
}
.divider, .wp-block-separator {
    margin: 20px auto 40px auto;
	background: url(img/div.png) center center no-repeat;
	border: none;
	height: 45px;
	width: 100%;
    clear: both;
    display: block;
    float: none;
    max-width: 100%;
	position: relative;
	background-size: contain;
	overflow: hidden;
}

.divider:before, .wp-block-separator:before {
    background: #000;
    position: absolute;
    content: '';
    top: 25px;
    right: 150px;
    width: 34%;
    height: 1px;
    background-size: contain;
}

.divider:after, .wp-block-separator:after {
    background: #000;
    position: absolute;
    content: '';
    top: 25px;
    left: 150px;
    width: 34%;
    height: 1px;
    background-size: contain;
}

.longdiv {
	margin: 45px 0 45px 0;
	background: #000;
	border: none;
	height: 1px;
	width: 100%;
    clear: both;
    display: block;
    float: none;
    max-width: 100%;
	position: relative;
	background-size: contain;
	overflow: hidden;
}

.minidiv {
	margin: 35px 0 45px 0;
	background: #000;
	border: none;
	height: 1px;
	width: 35%;
    clear: both;
    display: block;
    float: none;
    max-width: 35%;
	position: relative;
	background-size: contain;
	overflow: hidden;
}

.block-editor-block-list__layout ol.wp-block, .block-editor-block-list__layout ul.wp-block, body.block-editor-page.kt-editor-width-default ul.wp-block, body.block-editor-page.kt-editor-width-default ol.wp-block {
	    padding-left: 50px !important;
}

html :where(.editor-styles-wrapper) ol li, html :where(.editor-styles-wrapper) ol ol, html :where(.editor-styles-wrapper) ol ul, html :where(.editor-styles-wrapper) ul li, html :where(.editor-styles-wrapper) ul ol, html :where(.editor-styles-wrapper) ul ul {
    margin-left: 50px !important;
}

/* LINKS: Change the colors of your links here.  These will change he navigation as well.
* To override these color in navigation change the colors in the style-tablet.css file.
==========================================	*/

a, a:link, a:visited {
	color: #EC0000;
	text-decoration:none !important; 
	-webkit-transition: all 0.14s ease-in-out;
    -moz-transition: all 0.14s ease-in-out;
    -o-transition: all 0.14s ease-in-out;
    -ms-transition: all 0.14s ease-in-out;
}
a:hover, a:active, a:focus{
	color: #cccccc;
	text-decoration:none !important; /* change to none if you don't want links to be underlined wehn hovered */
}

/* TYPOGRAPHY: HEADINGS
==========================================  */
.page-header {
	margin-top: 0;
	border-color: transparent;
}

.pagehead {
    height: 450px;
	margin-bottom: 40px;
	background-position: center center;
	background-size: cover;
	position: relative;
	top: 0;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.pagehead:after {
    position: absolute;
	display: block;
	content: '';
	bottom: 0;
	height: 50%;
	width: 100%;	
	background: -webkit-linear-gradient(bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%);
	background: -o-linear-gradient(bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%);
	background: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%);
}

div#homefeatured {
    display: block;
	position: relative;
}

div#homefeatured #myCarousel, div#homefeatured .carousel, div#homefeatured .carousel-inner {
    height: 40vh;
}

#myCarousel {
	position: relative;
}

div#homefeatured #myCarousel:after {
    position: absolute;
	display: block;
	content: '';
	bottom: 0;
	height: 50%;
	width: 100%;	
	background: -webkit-linear-gradient(bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%);
	background: -o-linear-gradient(bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%);
	background: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%);
	z-index: 9;
}

div#homefeatured #myCarousel:before {
	position: absolute;
	content: '';
	background: url("img/road-logo.png") top left no-repeat;
	background-size: contain;
	width: 100%;
	height: 100%;
	display: block;
	top: 0;
	left: 0;
	z-index: 9;
	max-width: 670px;
	max-height: 475px;
}

.pagehead:before {
	position: absolute;
	content: '';
	background: url("img/road-logo.png") top left no-repeat;
	background-size: contain;
	width: 100%;
	height: 100%;
	display: block;
	top: 0;
	left: 0;
	max-width: 670px;
	max-height: 475px;
}

.pagehead .page-header {
	margin-top: 0;
	border-color: transparent;
	height: 30vh;
}

 .pagehead .page-header .entry-title{
	position: absolute;
	top: 30%;
	 color: #fff;
	 text-shadow: 0 0 15px #000;
}

#navigation .container {
	max-width: 1620px;
    width: 90%;
}

.green, span.green p {
	color: #027A10 !important;
}

.red {
	color: #E63F46 !important;
}

.thin {
	font-weight: 300 !important;
}

.center {
	text-align: center;
}

.walker {
	font-weight: 400 !important;
}

.walker:before {
    padding-right: 20px;
    content: url("img/xing.png");
}

.job_before {
	background: url("img/job_before.png") center center no-repeat;
	background-size: contain;
	margin-top: 5px;
	height: 30px;
	width: 55px;
	display: block;
}

h1, h2, h3, h4, h5, h6, .h2, .h3, .h4, .h5, .h6 {
	font-weight: 400;
	line-height: 120%;
	margin: 0 0 10px 0;
	-webkit-font-smoothing: antialiased;
	font-family: 'Bai Jamjuree', sans-serif;
}
h1, h1.entry-title {
	font-size: 32px;
	font-size: 3.2rem;
	font-family: 'Bai Jamjuree', sans-serif;
	color: #000000;
	font-weight: 400;
	margin-bottom: 50px;
}

.single-projects h1, h1.entry-title {
	margin-bottom: 10px;
}
h2, .h2, .single-projects h1.entry-title {
	font-size: 28px;
	font-size: 2.8rem;
	font-family: 'Bai Jamjuree', sans-serif;
	color: #000000;
	font-weight: 300;
}

.semi {
	font-weight: 500 !important;
}

.leftspace {
	margin-right: 20px;
}

.caps {
	text-transform: uppercase;
}

h3, .h3 {
	font-size: 25px;
	font-size: 2.5rem;
	font-family: 'Bai Jamjuree', sans-serif;
	color: #000000;
	font-weight: 500;
}
h4, .h4 {
	font-size: 25px;
	font-size: 2.5rem;
	font-family: 'Bai Jamjuree', sans-serif;
	color: #000000;
	font-weight: 500;
}
h5, .h5, .btn-mayecreate.large, a.btn-mayecreate.large:link, a.btn-mayecreate.large:visited, .wp-block-button.large a:link, .wp-block-button.large a:visited, span.h5 p {
	font-size: 23px;
	font-size: 2.3rem;
	font-family: 'Bai Jamjuree', sans-serif;
	color: #025A0C;
	font-weight: 500;
}

.contactnumber.h5{
	font-size: 20px;
	font-size: 2.0rem;
}

h6, .h6 {
	font-size: 20px;
	font-size: 2.0rem;
	font-family: 'Lato', sans-serif;
	color: #000000;
	font-weight: 600;
}

.random_fact_inner p.fact, .random_fact_inner p.answer {
	font-size: 16px;
	font-size: 1.6rem;
}

/* TYPOGRAPHY: PARAGRAPHS
==========================================  */
p, .btn-mayecreate, a.btn-mayecreate:link, a.btn-mayecreate:visited, .wp-block-button a:link, .wp-block-button a:visited {
	font-size: 15px;
	font-size: 1.5rem; /* 10 ÷ $rembase */
	margin:0 0 20px 0;
	font-family: 'Lato', sans-serif;
	color: #000000;
	font-weight: 500;
}

.p.project_title {
	font-family: 'Bai Jamjuree', sans-serif;
	font-weight: 500;
}

body {
	font-size: 15px;
	font-size: 1.5rem; /* 10 ÷ $rembase */
	font-family: 'Lato', sans-serif;
	color: #000000;
	font-weight: 500;
}

img {
    border-radius: 20px !important;
}

.inline {
	display: inline-block !important;
}

.space_bottom {
	margin-bottom: 30px;
}

.smallspace {
	margin-bottom: 20px;
}

.space_right {
	margin-right: 30px;
}

.factspace {
	margin-bottom: 50px
}

/* TYPOGRAPHY: LIST ITEMS
==========================================  */
ol, ul {
	margin-left: 40px;
	padding:0;
}
ul {
	list-style-type: none;
	list-style-position:outside;
}
ol {
	list-style-position:outside;
	list-style: none;
}

ol li {
    counter-increment: li;
}

ol li:before {
    content: counter(li) '.';
    color: #027A10;
    display: inline-block;
    width: 25px;
    margin-left: -1em;
	font-weight: 400;
}

li ol, li ul {
	margin:10px 0 10px 30px;
	padding:0;
}
li {
	margin:10px 0;
	padding:0;
}
ul li {
	list-style-type: disc;
}


/* BUTTONS: Styles for Custom Button Block
==========================================  */
.btn-mayecreate, a.btn-mayecreate:link, a.btn-mayecreate:visited, .wp-block-button a:link, .wp-block-button a:visited {
	background: #000;
	border-radius: 15px;
	color: #fff;
	border: none;
	padding: 15px 20px;
	text-align: center;
	line-height: 120%;
	height: auto;
	vertical-align: middle;
	cursor: pointer;
}

.team_wrapper .btn-mayecreate {
	border-radius: 20px;
}

a.btn-mayecreate:hover, a.btn-mayecreate:active, a.btn-mayecreate:focus, .wp-block-button a:hover, .wp-block-button a:active, .btn-mayecreate:hover {
	background: #027A10;
	color: #fff;
}
.btn-mayecreate.large, a.btn-mayecreate.large:link, a.btn-mayecreate.large:visited, .wp-block-button.large a:link, .wp-block-button.large a:visited {
	background: #000;
	color: #fff;
	text-transform: uppercase;
	padding: 15px 25px;
}
a.btn-mayecreate.large:hover, a.btn-mayecreate.large:active, a.btn-mayecreate.large:focus, .wp-block-button.large a:hover, .wp-block-button.large a:active {
	background: #027A10;
	color: #fff;
}

.btn-mayecreate.inverse, a.btn-mayecreate.inverse:link, a.btn-mayecreate.inverse:visited, .wp-block-button.inverse a:link, .wp-block-button.inverse a:visited {
	background: #EAEAEA;
	color: #000;
	padding: 15px 40px;
}
a.btn-mayecreate.inverse:hover, a.btn-mayecreate.inverse:active, a.btn-mayecreate.inverse:focus, .wp-block-button.inverse a:hover, .wp-block-button.inverse a:active {
	background: #000;
	color: #fff;
}

#ctf #ctf-more {
    display: block;
    color: #fff;
    background: #000;
    width: 200px;
    border-radius: 10px;
    padding: 15px 0;
    margin: 15px auto;
}



.galvid-btn {
	background:#fff;
	color: #000;
	padding: 5px 20px;
	width: 100%;
	border: 3px solid #000;
	text-transform: uppercase;
	margin-right: 20px;
	margin-bottom: 15px;
	font-weight: 400;
	border-radius: 15px;
	font-size: 18px;
}

.galvid-btn:hover, .galvid-btn:active  {
	background:#000;
	border: 3px solid #000;
	color: #fff;
}
.collapse-card {
	padding: 30px;
}

.infoarea {
	border-top: none;
	width: 100%;
	margin-bottom: 50px;
	margin-top: 50px;
}

button:focus {
    outline: none;
}

#navigation.affix {
	background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 60%, rgba(0,0,0,.5) 100%);
	min-height: 100px;
}

#navigation.affix-top {
	background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.3) 60%, rgba(0,0,0,0) 100%);
	min-height: 100px;
}

#navigation.affix .navbar-default {
    background-color: transparent;
    border-color: none;
}

#navigation.affix #branding-container {
    max-width: 135px;
    padding: 20px 10px;
    z-index: 99999;
}

#mobile_menu {
    height: 68px;
    margin-top: 5px;
}

.nav-button span {
    background: #fff;
}

.nav-button span::before, .nav-button span::after {
    background-color: #fff;
}

.mm-listview > li.active {
    background: #000;
}

#homeContentWrap.scroll, #contentwrap.scroll {
    padding-top: 0 !important;
}

#target-search_bar {
    background: #000;
    font-family: 'Lato', sans-serif;
    padding: 10px 0;
}

#searchform_header {
   display: block;
    width: 100%;
    margin: 10px auto !important;
    font-family: 'Lato', sans-serif;
    padding: 5px !important;
    border: 1px solid #ccc;
    border-radius: 10px;
}

#searchform_header input:first-child {
    display: block;
    width: 100%;
    border-radius: 0px;
    padding: 4px 12px;
    border: 0 none;
    outline: none;
    font-family: 'Lato', sans-serif;
}

div#homefeatured .slideDesc {
	display: none;
}

div#homefeatured #myCarousel, div#homefeatured .carousel, div#homefeatured .carousel-inner {
    display: block;
}

.hovercontent {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
	z-index: 999;
	opacity: 0;
}

.readblog {
    text-align: center;
    width: 100%;
    display: block;
    color: #fff;
    margin: 21% 0;
	padding-bottom: 30px;
	background: url("img/readmore.png") center bottom no-repeat;
}

.post_link_wrapper:hover .img_wrapper .hovercontent  {
    opacity: 1;
}

.post_link_wrapper.wide.feature_blog .img_wrapper {
    margin: 0 auto 0 auto;
    height: 100%;
    min-height: 375px;
    border-radius: 20px;
}

.blogcontent {
	padding: 15px 30px ; 
}

.blog_wrapper p {
	line-height: 1.6;
}

.post_link_wrapper.wide.feature_blog {
    margin-bottom: 50px;
    background: rgba(255,255,255,.5);
    border-radius: 20px;
}

.img_wrapper:after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.7);
	border-radius: 20px !important;
    opacity: 0;
    -webkit-transition: all 0.14s ease-in-out;
    -moz-transition: all 0.14s ease-in-out;
    -o-transition: all 0.14s ease-in-out;
    -ms-transition: all 0.14s ease-in-out;
}
.cat_wrapper_featured, .cat_wrapper_our-work {
	display: none;
}
.project_wrapper .img_wrapper:after {
    position: absolute;
    content: '';
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.7);
	border-radius: 20px !important;
    opacity: 1;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}

.project_wrapper:hover .img_wrapper:after {
    position: absolute;
    content: '';
    left: 0;
    right: 0;
	overflow: hidden;
	bottom:-83%;
    margin: auto;
    width: 100%;
    height: 100px;
    background: rgba(0,0,0,.7);
	border-radius:  0 0 20px 20px !important;
    opacity: 1;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}

.project_wrapper .img_wrapper { 
	overflow: hidden;
	border-radius: 20px !important;
}

.learnmore {
    display: block;
    text-align: center;
    position: absolute;
    bottom: 0;
    z-index: 99;
	width: 100%;
	opacity: 0;
}

.leartext {
    text-align: center;
    color: #FFB300;
    width: 100%;
    font-size: 25px;
    padding: 30px 0;
    display: block;
	font-weight: 600;
}

.project_wrapper {
	margin: 30px 13px;
}

.blog_wrapper {
    padding: 0px 20px 0px 20px;
}

.p.project_title{
    color: #fff;
    position: absolute;
    z-index: 99;
    padding: 40px 30px;
}

.project_wrapper:hover .img_wrapper .learnmore  {
    opacity: 1;
}

.project_wrapper:hover .p.project_title {
    opacity: 0;
	
    -webkit-transition: all 0.14s ease-in-out;
    -moz-transition: all 0.14s ease-in-out;
    -o-transition: all 0.14s ease-in-out;
    -ms-transition: all 0.14s ease-in-out;

}

.post_link_wrapper p {
    color: #000;
}
.post_link_wrapper:hover p {
    color: #828282;
}

.post_link_wrapper h2 {
    color: #000;
}
.post_link_wrapper:hover h2 {
    color: #E63F46;
}

/* Footer
===========================================  */

#credits {
    text-align: center;
    margin: 0;
    padding: 15px;
    background: #fff;
}

#credits p, #credits a {
	color: #000;
	text-align: center;
	padding: 0 0 10px 0;
	margin: 0;
	text-decoration: none;
	font-size: 18px;
}

#credits a:hover {
	color: #EC0000;
}

.ctf-item {
	background: #fff;
	padding: 7px;
}

ul.social {
	margin: 0;
	margin-bottom: 10px;
	padding: 0;
	display: inline;
}

ul.social li {
    padding-left: 5px;
    padding-right: 5px;
}

ul.social li a .fab {
	font-size: 30px;
}

ul.social li a:hover .fab {
	font-size: 30px;
	color: #fff !important;
}

ul.social li a .fab.fa-twitter-square {
	color:#E63F46;
}

ul.social li a .fab.fa-facebook-square {
	color:#FFB300;
}

ul.social li a .fab.fa-linkedin-square {
	color:#3CB34A;
}

#page ul.social li a:hover .fab.fa-twitter-square, #page ul.social li a:hover .fab.fa-facebook-square, #page ul.social li a:hover .fab.fa-linkedin-square {
	color:#000 !important;
}

.footercontact ul.social li a .fab.fa-twitter-square, .footercontact ul.social li a .fab.fa-facebook-square, .footercontact ul.social li a .fab.fa-linkedin-square {
	color:#fff !important;
}

.footercontact ul.social li a:hover .fab.fa-twitter-square, .footercontact ul.social li a:hover .fab.fa-facebook-square, .footercontact ul.social li a:hover .fab.fa-linkedin-square {
	color:#F7BE38 !important;
}



.centersocial {
    margin: 0 auto;
    display: block;
}

.centersocial i{
    text-align: center;
    font-size: 40px;
    color: #000;
}

.centersocial:hover i{
    opacity: .5;
}

.footercontact  {
	text-align: center;
	margin: 0px auto 0 auto;
}

.footercontact p, .footercontact a{
	display: inline;
	text-align: center;
	color:#fff;
}

.footercontact a:hover{
	color:#F7BE38;
}

#aboveNav #branding-container {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	width: 75%;
	max-width: 135px;
	margin: 0;
	z-index: 1100;
	background: #fff;
	padding: 20px 5px;
	border-radius: 100px 0px 100px 100px;
}


.job_category {
	display: inline-block;
	padding: 10px 15px;
    border: 3px solid #000;    
	top: -10px;
    position: relative;
	border-radius: 15px;
	margin-right: 15px;
	font-family: 'Bai Jamjuree', sans-serif;
	
} 

.jobs_wrapper .grey {
	color: #7E7E7E;
}

.jobs_wrapper:hover .grey {
	color: #000000;
}

.jobs_wrapper h2 {
	color: #025A0C;
}

.jobs_wrapper:hover h2 {
	color: #EC0000;
	text-decoration: underline;
}

.greybox {
	padding: 30px;
	border-radius: 30px;
	background: rgba(239,239,239,.5);
	margin: 0px 0 30px 0;
}

.testimonial_wrapper {
    padding: 30px 80px;
    background: #EFEFEF;
    border-radius: 30px;
	position: relative;
}

.testimonial_wrapper:before {
    display: block;
	position: absolute;
	content: '';
	height: 45px;
	width: 45px;
	background: url("img/left-q.png") left top no-repeat;
	background-size: contain;
	top: 30px;
	left: 20px;
}

.testimonial_wrapper:after {
    display: block;
	position: absolute;
	content: '';
	height: 35px;
	width: 35px;
	background: url("img/right-q.png") right bottom no-repeat;
	background-size: contain;
	bottom: 30px;
	right: 20px;
}

.right {
	text-align: right !important;
}

.team_wrapper .team-name {
    color: #000000;
    padding: 0 5px;
	font-weight: 400;
}

.team_wrapper:hover .team-name {
    color: #000000;
    padding: 0 5px;
	font-weight: 400;
}
.team_wrapper .team-title {
    color: #666;
    font-size: 25px;
    font-size: 2.5rem;
}

.team_wrapper:hover .team-title {
    color: #666;
    font-size: 25px;
    font-size: 2.5rem;
}

.team_wrapper {
	padding-right: 25px !important;
    padding-left: 25px !important;
}

.team-box, .team-single {
    max-width: 100%;
    position: relative;
}

.hoverinfo {
	position: absolute;
    top: 0;
    bottom: 0;
    display: block;
    left: 0;
    right: 0;
    width: auto;
    height: auto;
    margin: 10% 15%;
    z-index: 999;
	opacity: 0;
}

.team-box:after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    max-width: 100%;
    height: 100%;
    background: rgba(255,255,255,.6);
	border-radius: 180px 20px  !important;
    background-size: contain;
    opacity: 0;
	z-index: 1;
    -webkit-transition: all 0.14s ease-in-out;
    -moz-transition: all 0.14s ease-in-out;
    -o-transition: all 0.14s ease-in-out;
    -ms-transition: all 0.14s ease-in-out;
}

.team-box:before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    max-width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
	border-radius: 20px !important;
    background-size: contain;
    opacity: 0;
	z-index: 1;
    -webkit-transition: all 0.14s ease-in-out;
    -moz-transition: all 0.14s ease-in-out;
    -o-transition: all 0.14s ease-in-out;
    -ms-transition: all 0.14s ease-in-out;
}

.team_wrapper:hover .team-box:before, .team_wrapper:hover .team-box:after {
    opacity: 1;
}

.team_wrapper:hover .team-box .hoverinfo, .team_wrapper:hover .team-box .learn_team{
	opacity: 1;
}

.team_wrapper:hover .team-box p {
    color: #000;
}


.random_fact {
    padding: 0 15px 0 15px; 
	margin-bottom: 0;
}

.employment {
    border-top: 1px solid #000;
    width: 100%;
    display: block;
	padding-top: 10px;
}

.answer {
	font-weight: 600;
	font-style: italic;
	padding-top: 15px;
	font-family: 'Bai Jamjuree', sans-serif;
}

p.fact, .team-year {
    padding-bottom: 0;
    margin-bottom: 0;
	font-family: 'Bai Jamjuree', sans-serif;
}

.team-year {
    color: #025A0C !important;
	font-weight: 600;
	font-family: 'Bai Jamjuree', sans-serif;
}

.career-year {
    color: #000;
	font-weight: 600;
	font-family: 'Lato', sans-serif;
}

 .team_wrapper .learn_team {
    position: absolute;
    z-index: 99999;
    color: #000;
    width: 100%;
    display: block;
    height: 100%;
    top: 0; 
	 opacity: 0;
}

.team_wrapper .learn_team span{
    text-align: left;
    width: 100%;
    display: block;
    padding: 15px;
    bottom: 0;
    position: absolute;
}

.searchandfilter ul {
	margin: 0 0 20px 0;
}
.searchandfilter .sf-field-submit input{
	display: block;
	background: #027A10;
	color: #fff;
	padding: 10px 25px;
	text-align: center;
	font-weight: 400;
	text-decoration: none;
	border: none;
	border-radius: 10px;
	font-family: 'Bai Jamjuree', sans-serif;
}
.searchandfilter .sf-field-submit input:hover {
	background: #2F2F2F;
}
.searchandfilter select, .searchandfilter label {
	display: block;
	width: 100%;
}
.searchandfilter select, .searchandfilter ul li.sf-field-search label input {
	font-weight: 400;
	color: #000;
	padding: 10px 25px;
	border-radius: 10px;
	border: 3px solid #000;
}

#navigation.affix {
    top: 0;
}

#navigation.affix .fa-search {
    display: none;
}

#navigation.affix-top {
    z-index: 100;
    width: 100%;
}

#navigation.affix {
    top: 0;
    position: fixed !important;
}

#navigation {
    margin-top: 0;
    margin-bottom: 35px;
    position: absolute;
    z-index: 100;
    width: 100%;
}

        /* Small devices (tablets, 768px and up) */
		@media (min-width: 768px) {
			
			
			
			
			
			/* TYPOGRAPHY
			===========================================  */
			body {
				font-size: 18px;
				font-size: 1.8rem;
			}
			h1, h1.entry-title {
				font-size: 40px;
				font-size: 4.0rem;
			}
			h2, .h2, .single-projects h1.entry-title {
				font-size: 30px;
				font-size: 3.0rem;
			}
			h3, .h3 {
				font-size: 25px;
				font-size: 2.5rem;
			}
			h4, .h4 {
				font-size: 25px;
				font-size: 2.5rem;
			}
			h5, .h5, .btn-mayecreate.large, a.btn-mayecreate.large:link, a.btn-mayecreate.large:visited, .wp-block-button.large a:link, .wp-block-button.large a:visited, span.h5 p {
				font-size: 23px;
				font-size: 2.3rem;
			}
			
			.contactnumber.h5{
				font-size: 23px;
				font-size: 2.3rem;
			}
			h6, .h6 { 
				font-size: 20px;
				font-size: 2.0rem;
			}
			p, .btn-mayecreate, a.btn-mayecreate:link, a.btn-mayecreate:visited, .wp-block-button a:link, .wp-block-button a:visited, .p.project_title {
				font-size: 18px;
				font-size: 1.8rem;
			}
			
			#navigation.affix #main_nav a {
		    	font-size: 17px;
		    	padding: 15px 10px;
		    }
			
			#navigation.affix #top_nav a {
		    	font-size: 17px;
		    	padding: 10px 15px;
		    }
			
			#navigation.affix li .fa-search {
				padding: 18px 10px 0 10px;
				font-size: 19px;
			}
            
        }

            /* Small devices (tablets, 992px and up) */
            @media (min-width: 992px) {
				
				.infoarea {
					border-top: none;
					width: 100%;
					margin-bottom: 50px;
					margin-top: 50px;
				}
				
				.galvid-btn {
					background:#fff;
					color: #000;
					padding: 10px 20px;
					width: 100%;
					border: 3px solid #000;
					text-transform: uppercase;
					margin-right: 20px;
					margin-bottom: 15px;
					font-weight: 400;
					border-radius: 15px;
					font-size: 20px;
				}

				.galvid-btn:hover, .galvid-btn:active  {
					background:#000;
					border: 3px solid #000;
					color: #fff;
				}
				
				
				#navbarTop.navbar, #navbarBottom.navbar {
					border-radius: 0px;
					margin: 0;
					padding: 0;
				}
				/* TYPOGRAPHY
					===========================================  */
					body {
						font-size: 18px;
						font-size: 1.8rem;
					}
					h1, h1.entry-title {
						font-size: 40px;
						font-size: 4.0rem;
					}
					h2, .h2, .single-projects h1.entry-title {
						font-size: 33px;
						font-size: 3.3rem;
					}
					h3, .h3 {
						font-size: 30px;
						font-size: 3.0rem;
					}
					h4, .h4 {
						font-size: 25px;
						font-size: 2.5rem;
					}
					h5, .h5, .btn-mayecreate.large, a.btn-mayecreate.large:link, a.btn-mayecreate.large:visited, .wp-block-button.large a:link, .wp-block-button.large a:visited {
						font-size: 25px;
						font-size: 2.5rem;
					}
					.contactnumber.h5, span.h5 p{
						font-size: 23px;
						font-size: 2.3rem;
					}
					h6, .h6 { 
						font-size: 20px;
						font-size: 2.0rem;
					}
					p, .btn-mayecreate, a.btn-mayecreate:link, a.btn-mayecreate:visited, .wp-block-button a:link, .wp-block-button a:visited, .p.project_title {
						font-size: 18px;
						font-size: 1.8rem;
					}
				
					.random_fact_inner p.fact, .random_fact_inner p.answer {
						font-size: 18px;
						font-size: 1.8rem;
					}
				
					/* TOP NAVIGATION
				    ==========================================  */
				    #navbarTop, #navbarBottom, #footer_nav {
				    	display: block;
				    }
					#navbarTop.navbar, #navbarBottom.navbar {
				    	border-radius: 0px;
					}
				    #navbarTop.navbar .container, #navbarBottom.navbar .container {
				    	position: relative;
				    }	
                    #top_nav {
                        width: 100%;
                        max-width: 100%;
                    }
					#top_nav ul {
				    	margin:0;
				    	padding:0;
				    	list-style:none;
				    	display:inline;
				    }
				    #top_nav ul li {
				    	float: left;
				    	margin:0;
				    	padding:0 0 0 0;
				    	background:none;
						list-style: none;
				    }
				    #top_nav a:link, #top_nav a:visited {
				    	display: inline-block;
				    	text-decoration: none;
				    	font-size: 17px;
				    	font-size: 1.7rem;
				    	background: #3CB34A;
						padding: 15px 20px;
						margin: 0 5px;
						border-radius: 0 0 20px 20px;
				    	text-transform: uppercase;
				    	color: #000;
				    	font-weight: 600;
						    font-family: 'Bai Jamjuree', sans-serif;
				    	/* if you have different color for Nav links, change it here */
				    }
				    #top_nav a:hover, #top_nav a:active, #top_nav a:focus, #top_nav > ul > li.active > a {
				    	color: #000000;
				    	text-decoration:none;
						background: #EAEAEA;
				    	/* if you have different color for Nav link hover state, change it here */
				    }  
					
					#top_nav ul ul li a:link, #top_nav ul ul li a:visited {
						background: none;
						text-align: left;
						color: #000;
						font-size: 18px;
						
					}

					#navigation.affix-top {
						position: fixed !important;
					}
					
					#top_nav ul ul li a:hover, #top_nav ul ul li a:active {
						background: none;
						text-align: left;
						color: #333;
						font-size: 18px;
					}
					
					#top_nav > ul > li {
						position: relative !important; 
					}
					
					#top_nav ul ul {
				    	z-index: 999999999999;
				    }
					
					#top_nav ul li:hover ul, #top_nav ul li:hover ul #top_nav ul ul li:hover ul {
				    	list-style: none;
				    	position: absolute;
				    	display: list-item;
						margin-left: 3px;
					}
					
					#top_nav ul ul {
				    	display: none;
				    	position: absolute;
				    	z-index: 9000;
				    	background: rgba(255,255,255,.9);
				    	margin: 0px 0;
				    	padding: 5px;
				    	width: 200px;
				    	min-width: 200px;
				    	max-width: 200px;
				    	border: none;
				    	border-top: none;
						border-radius: 20px;
				    } 
				
					
					#top_nav ul ul li{
				    	float: none;
						width: 100%;
    					text-align: left;
				    }
					
					#top_nav ul ul li{
				    	float: right;
				    }
					
					#top_nav ul ul li a{
				    	padding: 10px 15px 10px 15px !important;
				    	width: 100%;
						    margin: 0 !important;
				    } 
				
					#top_nav ul ul li a:link, #top_nav ul ul li a:visited {
						width: 100%;
						font-size: 17px;
						text-shadow: none;
						padding: 10px 15px;
						color: #000;
					}

					#top_nav ul ul li a:hover, #top_nav ul ul li a:active, #top_nav ul ul li a:focus, #top_nav > ul > ul > li.active > a {
						color: #EC0000;
						text-decoration: none;
					}
				
					


				    /* MAIN NAVIGATION
				    ==========================================  */
				    #main_nav {
				    	display: block;
				    }
				    
				    #main_nav ul {
				    	margin:0;
				    	padding:0;
				    	list-style:none;
				    }
				    #main_nav ul li {
				    	float: left;
				    	margin:0;
				    	padding:0;
				    	background:none;
				    	display: block;
				    	position: relative;
				    }
					#main_nav ul ul {
				    	display: none;
				    	position: absolute;
				    	z-index: 9000;
				    	background: rgba(255,255,255,.9);
				    	margin: 0;
				    	padding: 5px;
				    	width: 250px;
				    	min-width: 300px;
				    	max-width: 300px;
				    	border: none;
				    	border-top: none;
						border-radius: 15px;
				    }
				
					#main_nav ul ul:after {
					  width: 0; 
					  height: 0;
						position: absolute;
						top: -15px;
					  border-left: 15px solid transparent;
					  border-right: 15px solid transparent;
					  border-bottom: 15px solid rgba(255,255,255,.9);
						content: '';
						display: block;
						left: 30px;
					}
				
					#main_nav ul li:hover ul, #main_nav ul li:hover ul #main_nav ul ul li:hover ul {
				    	list-style: none;
				    	position: absolute;
				    	display: list-item;
					}
					
					#main_nav ul ul ul.sub-menu {
				    	display: none;
				    	position: absolute;
						right: -250px;
						top: 0;
				    } 
					#main_nav ul li ul li:hover ul.sub-menu {
						display: block;
					}
					
					#main_nav ul ul li {
				    	float: none;
						display: block;
						position: relative;
				    }
					
				    #main_nav a:link, #main_nav a:visited {
				    	display: inline-block;
				    	margin: 0;
				    	text-decoration: none;
				    	font-size: 17px;
				    	padding: 25px 10px;
				    	text-transform: uppercase;
				    	color: #fff;
				    	font-weight: 700;
						text-shadow: 0 0 10px #000;
						    font-family: 'Bai Jamjuree', sans-serif;
					}
					#main_nav a:hover, #main_nav a:active, #main_nav a:focus, #main_nav > ul > li.active > a {
				    	/* if you have different color for Nav link hover state, change it here */
				    	color: #FFB300;
				    	text-decoration:none;
				    }
				    #main_nav ul ul li a:link, #main_nav ul ul li a:visited {
				    	width: 100%;
						font-size: 17px;
						text-shadow: none;
						padding: 10px 15px;
						color: #000;
				    } 
				
					#main_nav ul ul li a:hover, #main_nav ul ul li a:active, #main_nav ul ul li a:focus, #main_nav > ul > ul > li.active > a {
				    	/* if you have different color for Nav link hover state, change it here */
				    	color: #EC0000;
				    	text-decoration:none;
				    }
					#mobile_menu {
				    	display: none;
				    }
					/*WIDE MENU
					============================ */
					.affix-top #main_nav > ul > .wide-drop > ul {
						width: 100%;
						max-width: 100%;
						left: 0;
						position: fixed;
						padding: 45px 10%;
						text-align: center;
						vertical-align: top;
					}
					.affix-top #main_nav > ul > .wide-drop > ul:after {
						display: block;
						clear: both;
						content: '';
					}
					.affix #main_nav > ul > .wide-drop > ul {
						top: auto !important;
					}
					.affix-top #main_nav > ul > .wide-drop > ul > li {
						float: none;
						display: inline-block;
						width: calc(100% / 3 - 26px);
						margin-right: 15px;
						padding-right: 10px;
						border-right: 0 none;
						height: 100%;
						text-align: left;
						vertical-align: top;
					}
					.affix-top #main_nav > ul > .wide-drop > ul > li:last-child {
						margin-right: 0;
						padding-right: 0;
						border: 0 none;
						width: calc(100% / 3);
					}
					.affix-top #main_nav > ul > .wide-drop > ul > li a {
						padding: 5px 10px;
						text-transform: uppercase;
						margin-bottom: 0;
					}
					.affix-top #main_nav > ul > .wide-drop > ul > li > a {
						margin: 0 0 10px 0;
						font-weight: 300;
					}
					.affix-top #main_nav > ul > .wide-drop > ul > li > a:hover, .affix-top #main_nav > ul > .wide-drop > ul > li > a:active {
						background: none;
					}
					.affix-top #main_nav > ul > .wide-drop > ul ul {
						position: static;
						background: none;
						display: block;
						width: 100%;
						max-width: 100%;
						border: 0 none;
					}
					.affix-top #main_nav > ul > .wide-drop > ul ul a:link, .affix-top #main_nav > ul > .wide-drop > ul ul a:visited {
						font-weight: 400;
						text-transform: none;
					}
					.affix-top #main_nav > ul > .wide-drop > ul ul a:hover, .affix-top #main_nav > ul > .wide-drop > ul ul a:active {
					}

				    /* FOOTER NAVIGATION
				    ==========================================  */
				
					.footercontact  {
						text-align: right;
						margin: 20px 0 0 0;
					}
				
					.footercontact p, .footercontact a{
						display: inline;
						text-align: right;
						color:#fff;
					}
				
					.footercontact a:hover{
						color:#F7BE38;
					}
				
				
					#credits span {
						display:inline;
						height:auto;
						overflow:hidden;
					}
				   #footer_nav {
						display: table;
						float: right;
						clear: both;
					}
				    #footer_nav ul {
				    	margin:0;
				    	padding:0;
				    	list-style:none;
				    	display:inline;
				    }
				    #footer_nav ul li {
				    	float: left;
				    	margin:0;
				    	padding:0 0 0 0;
				    	background:none;
						list-style: none;
				    }
					#footer_nav a:link, #footer_nav a:visited {
				    	display:inline-block;
				    	margin:0;
				    	text-decoration:none;
				    	font-size: 16px;
				    	font-size: 1.6rem;
				    	padding: 10px 10px;
						font-family: 'Bai Jamjuree', sans-serif;
						color: #fff;
						text-transform: uppercase;
				    	/* if you have different color for Nav links, change it here */
				    }
				    #footer_nav a:hover, #footer_nav a:active, #footer_nav a:focus, #footer_nav > ul > li.active > a {
				    	text-decoration:none;
						color: #F7BE38;
				    	/* if you have different color for Nav link hover state, change it here */
				    }
				
					li .fa-search{
						padding: 28px 15px 0 15px;
						font-size: 20px;
						color: #fff;
						text-shadow: 0 0 10px #000;
					}

					li:hover .fa-search{
						color: #FFB300;
						text-decoration: none;
					}

					li .fa-search.collapseomatic {
						background-image: none;
					}

            }

                /* Small devices (tablets, 1024px and up) */
                @media (min-width: 1024px) {
					
					#footer_nav a:link, #footer_nav a:visited {
				    	font-size: 17px;
				    	font-size: 1.7rem;
				    	padding: 10px 13px;
				    }
					
					.searchandfilter ul li, .searchandfilter ul li.sf-field-search {
						list-style: none;
						display: inline-block !important;
						padding: 10px 0;
						margin: 5px !important;
						width: calc(100% / 4 - 10px);
					}

					.searchandfilter ul li.sf-field-reset {
						width: 100px;
					}

                }

                    /* Small devices (tablets, 1200px and up) */
                    @media (min-width: 1200px) {
						
						div#homefeatured #myCarousel, div#homefeatured .carousel, div#homefeatured .carousel-inner {
							height: 60vh;
						}

						ul.social li a .fab {
							font-size: 40px;
						}

						ul.social li a:hover .fab {
							font-size: 40px;
						}
						
						ul.social li {
							padding-left: 10px;
							padding-right: 10px;
						}
						
						.infoarea {
							border-top: 4px solid #000;
							width: 100%;
							margin-bottom: 50px;
							margin-top: 50px;
						}
						
						.galvid-btn {
							background:#fff;
							color: #000;
							padding: 15px 25px;
							width: auto;
							border: 3px solid #000;
							text-transform: uppercase;
							margin-right: 20px;
							font-weight: 400;
							border-radius: 0 0px 15px 15px;
							border-top: 0;
							font-size: 23px;
						}

						.galvid-btn:hover, .galvid-btn:active  {
							background:#000;
							border: 3px solid #000;
							border-top: 0;
							color: #fff;
						}
						
						.testimonial_wrapper:before {
							display: block;
							position: absolute;
							content: '';
							height: 75px;
							width: 95px;
							background: url("img/left-q.png") left top no-repeat;
							background-size: contain;
							top: 30px;
							left: -30px;
						}

						.testimonial_wrapper:after {
							display: block;
							position: absolute;
							content: '';
							height: 50px;
							width: 60px;
							background: url("img/right-q.png") right bottom no-repeat;
							background-size: contain;
							bottom: 30px;
							right: -20px;
						}
						
						#aboveNav #branding-container {
							position: absolute;
							top: 0;
							right: 0;
							left: 0;
							width: 75%;
							max-width: 195px;
							margin: 0;
							z-index: 1100;
							background: #fff;
							padding: 30px 5px;
							border-radius: 100px 0px 100px 100px;
						}
						
						#top_nav a:link, #top_nav a:visited {
							font-size: 18px;
							font-size: 1.8rem;
							padding: 15px 18px;
							margin: 0 7px;
						}

						#main_nav a:link, #main_nav a:visited {
							font-size: 23px;
							padding: 23px 15px 10px 15px;
						}

						li .fa-search{
							padding: 28px 15px 0 15px;
							font-size: 23px;
							color: #fff;
						}

						li:hover .fa-search{
							color: #FFB300;
							text-decoration: none;
						}

						li .fa-search.collapseomatic {
							background-image: none;
						}
						
						/* TYPOGRAPHY
						===========================================  */
						body {
							font-size: 20px;
							font-size: 2rem;
						}
						h1, h1.entry-title {
							font-size: 50px;
							font-size: 50rem;
						}
						h2, .h2, .single-projects h1.entry-title {
							font-size: 38px;
							font-size: 3.8rem;
						}
						h3, .h3 {
							font-size: 30px;
							font-size: 3.0rem;
						}
						h4, .h4 {
							font-size: 28px;
							font-size: 2.8rem;
						}
						h5, .h5, .btn-mayecreate.large, a.btn-mayecreate.large:link, a.btn-mayecreate.large:visited, .wp-block-button.large a:link, .wp-block-button.large a:visited, span.h5 p {
							font-size: 28px;
							font-size: 2.8rem;
						}
						h6, .h6 { 
							font-size: 25px;
							font-size: 2.5rem;
						}
						
						.p.project_title {
							font-size: 23px;
							font-size: 2.3rem;
						}
						
						p, .btn-mayecreate, a.btn-mayecreate:link, a.btn-mayecreate:visited, .wp-block-button a:link, .wp-block-button a:visited {
							font-size: 20px;
							font-size: 2rem;
						}
						
						.blog_wrapper p {
							font-size: 21px;
							font-size: 2.1rem;
						}
						
						.random_fact_inner p.fact, .random_fact_inner p.answer {
							font-size: 21px;
							font-size: 2.1rem;
						}

                    }

                        /* Small devices (tablets, 1366px and up) */
                        @media (min-width: 1366px) {
							/* TYPOGRAPHY
							===========================================  */
							body {
								font-size: 20px;
								font-size: 2rem;
							}
							h1, h1.entry-title {
								font-size: 60px;
								font-size: 6rem;
							}
							h2, .h2, .single-projects h1.entry-title {
								font-size: 40px;
								font-size: 4.0rem; 
							}
							h3, .h3 {
								font-size: 35px;
								font-size: 3.5rem;
							}
							h4, .h4 {
								font-size: 30px;
								font-size: 3rem;
							}
							h5, .h5, .btn-mayecreate.large, a.btn-mayecreate.large:link, a.btn-mayecreate.large:visited, .wp-block-button.large a:link, .wp-block-button.large a:visited, span.h5 p {
								font-size: 30px;
								font-size: 3.0rem;
							}
							h6, .h6 { 
								font-size: 28px;
								font-size: 2.8rem;
							}
							
							.p.project_title {
								font-size: 25px;
								font-size: 2.5rem;
							}
														
							p, .btn-mayecreate, a.btn-mayecreate:link, a.btn-mayecreate:visited, .wp-block-button a:link, .wp-block-button a:visited {
								font-size: 23px;
								font-size: 2.3rem;
							}
							
							.blog_wrapper p {
								font-size: 23px;
								font-size: 2.3rem;
							}
							
							#top_nav a:link, #top_nav a:visited {
								font-size: 20px;
								font-size: 2.0rem;
								padding: 15px 18px;
								margin: 0 7px;
							}

							#main_nav a:link, #main_nav a:visited {
								font-size: 28px;
								padding: 25px 18px 10px 18px;
							}

							li .fa-search{
								padding: 30px 18px 0 18px;
								font-size: 25px;
								color: #fff;
							}

							li:hover .fa-search{
								color: #FFB300;
								text-decoration: none;
							}

							li .fa-search.collapseomatic {
								background-image: none;
							}
							
							#footer_nav a:link, #footer_nav a:visited {
								font-size: 23px;
								font-size: 2.3rem;
							}
							
							.random_fact_inner p.fact, .random_fact_inner p.answer {
								font-size: 23px;
								font-size: 2.3rem;
							}

                        }

                            /* Small devices (tablets, 1500px and up) */
                            @media (min-width: 1500px) {
								
								.galvid-btn {
									background:#fff;
									color: #000;
									padding: 15px 45px;
									width: auto;
									border: 3px solid #000;
									text-transform: uppercase;
									margin-right: 20px;
									font-weight: 400;
									border-radius: 0 0px 15px 15px;
									border-top: 0;
									font-size: 25px;
								}

								.galvid-btn:hover, .galvid-btn:active  {
									background:#000;
									border: 3px solid #000;
									border-top: 0;
									color: #fff;
								}
								
								#top_nav a:link, #top_nav a:visited {
									font-size: 22px;
									font-size: 2.2rem;
									padding: 15px 25px;
									margin: 0 7px;
								}
								
								#main_nav a:link, #main_nav a:visited {
									font-size: 28px;
									padding: 25px 20px 10px 20px;
								}
								
								li .fa-search{
									padding: 30px 20px 0 20px;
									font-size: 28px;
									color: #fff;
								}
								
								li:hover .fa-search{
									color: #FFB300;
									text-decoration: none;
								}
								
								li .fa-search.collapseomatic {
									background-image: none;
								}

                            }

                                /* Small devices (tablets, 1700px and up) */
                                @media (min-width: 1700px) {

                                }