@charset "UTF-8";
/* CSS Document */

.digitalhero {
	width:100%;
	background-color:#cfd966;
	background-image: url("rts-2018-digital-campaigns-hero.png");
	background-size:100%;
	background-repeat:no-repeat;
	position:absolute;
	top:0px;
	left:0px;
	right:0px;
	z-index:0;
}

.digitalherocarousel {
	position:relative;
	margin:0 auto;
	width:40%;
	top:1%;
}

.digitalintro {
	position:relative;
	top:50px;
	width:88%;
	margin:0 auto;
	padding-bottom:180px;
}

.digitalconclusion {
	width:100%;
	background-image: url("rts-2018-pink-angle.png");
	background-repeat:no-repeat;
	background-size:100%;
	padding-bottom:180px;
}


.shortwidth {
	width:70%;
	margin:0 auto;
}

.verticalspacer {
	height:10%;
	padding-top:10%;
}

.twocolumnflexbox {
	-webkit-columns: 2 200px;
    -moz-columns: 2 200px;
    columns: 2 200px;
	-webkit-column-gap:40px;
	-moz-column-gap:40px;
	column-gap:40px;
	text-align:left;
	align-content:flex-start;
	display:flex;
	width:88%;
	margin:0 auto;
}

.contact {
	width:86%;
	margin:0 auto;
	display: flex;
  align-items: center;
  justify-content: center;
	padding-top:30px;
	padding-bottom:10%;
}

.contactdesktop {
	visibility:visible;
	display:block;
	clear:none;
}

.contactmobile {
	visibility:hidden;
	clear:both;
	display:none;
}

.buttonbeige {
	display:inline-block;
	padding-left:20px;
	padding-right:20px;
	height:50px;
	background-color:#fef5e5;
	border-radius:10px;
	border:none;
	font-family:rubik;
	font-weight:500;
	font-size:20px;
	color:#ef5b66;
	text-align:center;
	line-height:50px;
}

.buttonbeigealt {
	display:inline-block;
	padding-left:20px;
	padding-right:20px;
	height:50px;
	background-color:#fef5e5;
	border-radius:10px;
	border:none;
	font-family:rubik;
	font-weight:500;
	font-size:20px;
	color:#ef5b66;
	text-align:center;
	line-height:50px;
}

article {
	float:left;
	position:relative;
}

.articleleft {
	width:35%;
	margin-left:13%;
	margin-right:2%;
}

.articleright {
	width:35%;
	margin-left:2%;
	margin-right:13%;
}



h1 {
	font-family:rubik;
	font-weight:700;
	font-size:150px;
	line-height:120px;
	letter-spacing:-5px;
	text-align:center;
	color:#fef5e5;
	margin-top:-4px;
	margin-bottom:10px;
	margin-right: 0px;
}

h2 {
	font-family:rubik;
	font-weight:500;
	font-size:50px;
	line-height:50px;
	letter-spacing:-0px;
	text-align:center;
	color:#fef5e5;
	margin-top:-4px;
	margin-right: 0px;
}

h3 {
	font-family:rubik;
	font-weight:300;
	font-size:24px;
	line-height:28px;
	color:#fef5e5;
	text-align:center;
}

h4 {
	font-family:rubik;
	font-weight:700;
	font-size:150px;
	line-height:120px;
	letter-spacing:-5px;
	text-align:center;
	color:#fef5e5;
	margin-top:-4px;
	margin-right: 0px;
	margin-bottom: 0px;
}

h5 {
	font-family:rubik;
	font-weight:500;
	font-size:50px;
	line-height:50px;
	letter-spacing:-0px;
	text-align:left;
	color:#fef5e5;
	margin-top:0px;
	margin-right: 0px;
	margin-bottom:20px;
}

p {
	font-family:rubik;
	font-weight:100;
	font-size:16px;
	line-height:20px;
	margin-top:-2px;
	color:#fef5e5;
	margin-bottom:20px;
	text-align:center;
}

.material-icons {
  font-size: 120px !important;

}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment  {
    display: none;
}
             
::-webkit-scrollbar-track-piece  {
    background-color: #fff;
     -webkit-border-radius: 6px;
}
             
::-webkit-scrollbar-thumb:horizontal {
     -webkit-border-radius: 6px;
     background-color: #cfd966;
}

::-webkit-scrollbar-thumb:vertical {
     -webkit-border-radius: 6px;
     background-color: #cfd966;
}




/* Style the tab */
.tab {
    overflow: hidden;
	margin: 0 auto;
    width: 88%;
}

/* Style the buttons that are used to open the tab content */
.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    width:25%;
    transition: 0.3s;
	color:#fef5e5;
}

/* Change background color of buttons on hover */
.tab button:hover {
    color: #ef5b66;
}

/* Create an active/current tablink class */
.tab button.active {
    color: #ef5b66;
}

/* Style the tab content */

.tabcontent {
	display: none;
	margin: 0 auto;
    width: 88%;
	margin-top:50px;
}

.tabflexbox {
	-webkit-columns: 2 300px;
    -moz-columns: 2 300px;
    columns: 2 300px;
	-webkit-column-gap:40px;
	-moz-column-gap:40px;
	column-gap:40px;
	text-align:left;
	align-content:flex-start;
}

.materialiconstab {
	font-family: 'Material Icons';
  	font-weight: normal;
  	font-style: normal;
  	font-size: 100px;  /* Preferred icon size */
  	display: inline-block;
  	line-height: 1;
  	text-transform: none;
  	letter-spacing: normal;
 	 word-wrap: normal;
  	white-space: nowrap;
  	direction: ltr;
	padding-top:15px; 
	padding-bottom:9px;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
	}


#navbar {
 	overflow: hidden;
	background-image: url("rts-2018-invisible-button.png");
	background-size:contain;
	height:140px;
	width:140px;
}

#navbar a {
 	float: left;
	display: block;
	color: rgba(0,0,0,0.20);
	text-decoration: none;
	font-size: 10px;
	text-align:center;
}

#navbar a:hover {
	color: rgba(2554,245,229,1.00);
}

#navbar a.active {
  
}

.sticky {
  position: fixed;
  top:45%;
  
}
.materialiconsnav {
	font-family: 'Material Icons';
  	font-weight: normal;
  	font-style: normal;
  	font-size: 80px;  /* Preferred icon size */
  	display: inline-block;
  	line-height: 1;
  	text-transform: none;
  	letter-spacing: normal;
 	 word-wrap: normal;
  	white-space: nowrap;
  	direction: ltr;
	padding-top:40%; 
	padding-left:20%;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
	}



/*---- TABLET ----*/
@media only screen and (max-width: 850px) and (min-width: 450px) {
.digitalherocarousel {
	position:relative;
	margin:0 auto;
	width:60%;
	top:20px;
}

.digitalintro {
	position:relative;
	top:50px;
	width:88%;
	margin:0 auto;
	padding-bottom:80px;
}

.digitalconclusion {
	width:100%;
	background-image: url("rts-2018-pink-angle.png");
	background-size:100%;
	padding-bottom:50px;
}
	
  .contact {
	width:86%;
	margin-left:7%;
	padding-top:20px;
}
  
  .contactdesktop {
	visibility:hidden;
	clear:both;
	display:none;
}

  .contactmobile {
	visibility:visible;
	display:block;
	clear:none;
}
	
  .shortwidth {
	width:96%;
	margin:0 auto;
}
	
  .beigeangle {
	margin-top:-250px;
}
	
  .tab {
	padding-top:100px;
	width:100%;
}
  .tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    width:25%;
    transition: 0.3s;
	color:#fef5e5;
}
  .tabcontent {
	margin-top:10px;
	  margin-bottom:50px;
}
	
  .articleleft {
	width:60%;
	margin-left:20%;
	margin-right:20%;
}

  .articleright {
	width:60%;
	margin-left:20%;
	margin-right:20%;
}
	
  h1 {
	font-size:105px;
	line-height:85px;
	letter-spacing:-2px;
	margin-top:-4px;
	margin-right: 0px;
}

  h2 {
	font-weight:300;
	font-size:32px;
	line-height:30px;
	letter-spacing:0px;
	padding-top:32px;
}
	
  h3 {
	font-size:22px;
	line-height:24px;
	margin-top:5px;
}
	
  h4 {
	color:#ef5b66;
	font-size:55px;
	line-height:50px;
	letter-spacing:-2px;
	margin-top:-4px;
	margin-right: 0px;
}
	
    h5 {
	color:#ef5b66;
	font-weight:300;
	font-size:18px;
	line-height:18px;
	letter-spacing:0.5px;
	padding-top:2px;
}
	
	
  .buttonbeige {
	height:35px;
	padding-left:10px;
	padding-right:10px;
	font-size:16px;
	line-height:36px;
	border-radius:7px;
}
	
  .buttonbeigealt {
	height:35px;
	padding-left:10px;
	padding-right:10px;
	font-size:16px;
	line-height:36px;
	border-radius:7px;
}

  .material-icons {
  	font-size: 80px !important;
}
	
  .materialiconstab {
	font-size: 60px;
	padding-top:15px; 
	padding-bottom:9px;
	}

	
  p {
	margin-bottom:10px;
}
	

	
#navbar {
 	overflow: hidden;
	background-image: url("rts-2018-invisible-button-mobile.png");
	background-size:contain;
	height:100px;
	width:100px;
}

#navbar a {
 	display: block;
	color: #ef5b66;
	text-decoration: none;
	font-size: 10px;
	text-align:center;
}

#navbar a:hover {
	color:#ef5b66;
}

#navbar a.active {
  
}

.sticky {
  position: fixed;
  margin:0 auto;
  top:0px;
  left:45%;
  
}

.materialiconsnav {
	font-size: 60px;
	padding-top:15%; 
	padding-left:32%;
	}

}
/*---- MOBILE----*/
@media only screen and (max-width: 450px) {
.digitalherocarousel {
	position:relative;
	margin:0 auto;
	width:100%;
	top:20px;
}

.digitalintro {
	position:relative;
	top:50px;
	width:88%;
	margin:0 auto;
	padding-bottom:50px;
}

.digitalconclusion {
	width:100%;
	background-image: url("rts-2018-pink-angle.png");
	background-size:100%;
	padding-bottom:50px;
}
	
  .contact {
	width:86%;
	margin-left:7%;
	padding-top:20px;
}
  
  .contactdesktop {
	visibility:hidden;
	clear:both;
	display:none;
}

  .contactmobile {
	visibility:visible;
	display:block;
	clear:none;
}
	
  .shortwidth {
	width:96%;
	margin:0 auto;
}
	
  .beigeangle {
	margin-top:-250px;
}
	
  .tab {
	padding-top:100px;
	width:100%;
}
  .tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    width:50%;
    transition: 0.3s;
	color:#fef5e5;
}
  .tabcontent {
	margin-top:10px;
	  margin-bottom:-150px;
}
	
  .articleleft {
	width:100%;
	margin-left:0%;
	margin-right:0%;
}

  .articleright {
	width:100%;
	margin-left:0%;
	margin-right:0%;
}
	
  h1 {
	font-size:55px;
	line-height:50px;
	letter-spacing:-2px;
	margin-top:-4px;
	margin-right: 0px;
}

  h2 {
	font-weight:300;
	font-size:18px;
	line-height:18px;
	letter-spacing:0.5px;
	padding-top:62px;
}
	
  h3 {
	font-size:22px;
	line-height:24px;
	margin-top:5px;
}
	
  h4 {
	color:#ef5b66;
	font-size:55px;
	line-height:50px;
	letter-spacing:-2px;
	margin-top:-4px;
	margin-right: 0px;
}
	
    h5 {
	color:#ef5b66;
	font-weight:300;
	font-size:18px;
	line-height:18px;
	letter-spacing:0.5px;
	padding-top:2px;
}
	
	
  .buttonbeige {
	height:35px;
	padding-left:10px;
	padding-right:10px;
	font-size:16px;
	line-height:36px;
	border-radius:7px;
}
	
  .buttonbeigealt {
	height:35px;
	padding-left:10px;
	padding-right:10px;
	font-size:16px;
	line-height:36px;
	border-radius:7px;
}

  .material-icons {
  	font-size: 80px !important;
}
	
  .materialiconstab {
	font-size: 60px;
	padding-top:15px; 
	padding-bottom:9px;
	}

	
  p {
	margin-bottom:10px;
}
	
 .tabcontent {
	height:500px;
	overflow:scroll;

}
	
#navbar {
 	overflow: hidden;
	background-image: url("rts-2018-invisible-button-mobile.png");
	background-size:contain;
	height:100px;
	width:100px;
}

#navbar a {
 	display: block;
	color: #ef5b66;
	text-decoration: none;
	font-size: 10px;
	text-align:center;
}

#navbar a:hover {
	color:#ef5b66;
}

#navbar a.active {
  
}

.sticky {
  position: fixed;
  margin:0 auto;
  top:0px;
  left:38%;
  
}

.materialiconsnav {
	font-size: 60px;
	padding-top:15%; 
	padding-left:32%;
	}
	
  
}
@media only screen and (min-width: 850px) {
  body {
    padding: 0 80px;
  }
	

}