
/*OLD FONTS*/
/*@font-face{font-family:'dinprobold';src:url("../font/dinpro-bold-webfont.eot");src:url("../font/dinpro-bold-webfont.eot?#iefix") format("embedded-opentype"), url("../font/dinpro-bold-webfont.woff") format("woff"), url("../font/dinpro-bold-webfont.ttf") format("truetype"), url("../font/dinpro-bold-webfont.svg#dinprobold") format("svg");font-weight:normal;font-style:normal;}
@font-face{font-family:'dinpromedium';src:url("../font/dinpro-medium-webfont.eot");src:url("../font/dinpro-medium-webfont.eot?#iefix") format("embedded-opentype"), url("../font/dinpro-medium-webfont.woff") format("woff"), url("../font/dinpro-medium-webfont.ttf") format("truetype"), url("../font/dinpro-medium-webfont.svg#dinpromedium") format("svg");font-weight:normal;font-style:normal;}
@font-face{font-family:'dinpro-regularregular';src:url("../font/dinpro-regular-webfont.eot");src:url("../font/dinpro-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../font/dinpro-regular-webfont.woff") format("woff"), url("../font/dinpro-regular-webfont.ttf") format("truetype"), url("../font/dinpro-regular-webfont.svg#dinpro-regularregular") format("svg");font-weight:normal;font-style:normal;}*/


/*END OLD FONTS*/

/*NEW FONTS*/





/*END NEW FONTS*/






/*SECTIONS AND BUCKETS*/


/* BEGIN HERO & CAROUSEL */

body {
    margin: 0px; 
}

.nav-temp

{
width:100%;
height:168px;
background:url(../images/NAV.america-cgtn.png);
 background-size: cover;background-repeat:no-repeat; background-position: top center;
    
}

@media all and ( max-width: 768px ) { 
.nav-temp
{
width:100%;
height:91px;
background:url(../images/NAV-collapsed.america-cgtn2.png);
 background-size: auto;background-repeat:no-repeat; background-position: top left;
    
}    
}


/*END NAV TEMP*/

.CGTN-HERO {

width: 100%;
height: 405px;
    max-height: 405px;
    background: #cccccc;
    overflow: hidden;

    margin-bottom: 45px;
    margin-top: 0px;
    
}

/* END SECTIONS AND BUCKETS*/


.CGTN-HERO .carousel {
  background: #FAFAFA;
    font-family: Helvetica, Arial, sans-serif;
    height:405px;
}

.CGTN-HERO .carousel-cell {
  width: 720px;
  height: 405px;
  margin-right: 15px;
  background-color: #000000;
}

/* cell number 
.carousel-cell:before {
  display: block;
  text-align: center;
  content: counter(carousel-cell);
  line-height: 200px;
  font-size: 80px;
  color: white;
}
*/

.CGTN-HERO .static-banner {
  position: absolute;
    
background-color:#660000;    
  background-color: rgb(153, 0, 0, 0.7);

  z-index: 1;
padding: 3px 20px;
    font-size: 1.5em;
font-family: dinprobold, Arial, "sans-serif";
    text-transform: uppercase;
  color: white;
  pointer-events: none;
}

.CGTN-HERO .static-banner1 {
  left: 0px;
  top: 0px;
}

.CGTN-HERO .static-banner2 {
  right: 0px;
  bottom: 0px;
}

.CGTN-HERO .carousel-cell .feature-title {
    

    width:100%;
    height: 100%;
    position: absolute;
 bottom:0px;
    left: 0px;
    padding: 0px;
    margin: 0px;    
    background:rgba(0, 0, 0, 0.8);
    background: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,.35), rgba(0,0,0,0), rgba(0,0,0,0)); /* Standard syntax (must be last) */
  text-align: center;
    
     -webkit-transition-duration: .7s;
  transition-duration: .7s;
}


.CGTN-HERO .carousel-cell .feature-title h1 {
    
font-family: dinprobold,  "Helvetica Neue", dinpro-regularregular, sans-serif;
    font-size: 2em;
    line-height: 1.1;
    color: #ffffff;
    text-shadow: 2px 2px rgba(0,0,0,.40);
    text-align: center;
    padding: 30px 15px;
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;

}

.CGTN-HERO .carousel-cell .feature-description {
    
   font-family: "montserrat-n5", "montserrat",  "Helvetica Neue", dinpromedium, sans-serif;
    font-weight:500;
    font-style: normal;
    line-height:1.3;
    color: #222222;
margin: 50px 50px;
    padding:15px;
    background-color:rgba(255, 255, 255, 0.9);
position: absolute;
 top:0px;
     left:0;
    right:0;
    opacity: 0.0;
      -webkit-transition-duration: .7s;
  transition-duration: .7s;
    z-index: 999999;
  }

.CGTN-HERO .carousel-cell:hover .feature-description {
 
    opacity: 1.0;
    
      -webkit-transition-duration: .7s;
  transition-duration: .7s;
  
}

.CGTN-HERO .carousel-cell:hover .feature-title {
    
    height: 100%;
 
  background: linear-gradient(to top, rgba(51,102,153,.5), rgba(51,102,153,.5), rgba(51,102,153,.5), rgba(51,102,153,.5)); /* Standard syntax (must be last) */
    
         -webkit-transition-duration: 1.5s;
  transition-duration: 1.5s;
  
}



/* Max Width 768px */
@media all and ( max-width: 768px ) {     
    
.CGTN-HERO {

width: 100%;
height: 270px;    
}        
 
.CGTN-HERO .carousel-cell {
  width: 480px;
  height: 270px;
    margin-right: 10px;
        
    }
    
.CGTN-HERO .carousel-cell .feature-title h1 {
    font-size: 20px;
    }    
}



/* Max Width 480px */
@media all and ( max-width: 480px ) {     
    
.CGTN-HERO {

width: 100%;
height: 320px;  
margin-right: 30px;    
}        
 
.CGTN-HERO .carousel-cell {
  width: 100%;
  height: 320px;
        
    }
    
.CGTN-HERO .carousel-cell .feature-title h1 {
    font-size: 1.3em;
    } 
    
    .CGTN-HERO .carousel-cell .feature-description {
    display: none;
    }  
}

/* END HERO & CAROUSEL */


/* BEGIN BUCKET  */

.CGTN-BUCKET {
    
 max-width: 1190px;
margin: 0px auto 30px;
    padding: 0px 10px;
    -moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
    box-sizing:border-box;
        width: 100%;
    display: table;
   
}




.CGTN-BUCKET .header-listing {
 
width: 100%;

    margin-bottom: 15px;
    text-align: left;
    border-bottom: 1px #cccccc dashed;
    padding: 0px;
    display:inline-block;
    
}

.CGTN-BUCKET .header-listing .header-title {
 
    color: #000000;
    font-size: 2.4em;
    font-family: "montserrat-n4", "montserrat",  "Helvetica Neue", dinpro-regularregular, sans-serif;
    font-weight: 400;
    font-style:normal;
    padding-right: 5px;
    line-height: 1.2;
    display: inline-block;    
}

.CGTN-BUCKET .header-listing .header-title a {
 
    color: #000000;
  text-decoration:none;  
}

.CGTN-BUCKET .header-listing .header-title a:hover {
 
    color: #336699;
 
}


/* Max Width 768px */
@media all and ( max-width: 768px ) {  
  
.CGTN-BUCKET .header-listing .header-title {
 
    font-size: 1.9em; 
    }
    
}




/* Max Width 480px */
@media all and ( max-width: 480px ) {  
  
.CGTN-BUCKET .header-listing .header-title {
 
    color: #000000;
    font-size: 1.5em; 
    }
    
}


.CGTN-BUCKET .bucket-container-left {
 
display: table;
float:left;
margin-right: 2%;
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
     box-sizing: border-box; 
    
}

.CGTN-BUCKET .bucket-container-right {
 
display: table;
float:right;
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
     box-sizing: border-box;   
    
}

.CGTN-BUCKET .container-60 {
width:59%;        
}


.CGTN-BUCKET .container-40 { 
width:39%;     
}

.CGTN-BUCKET .container-50 { 
width:49%; 

}




@media all and ( max-width: 480px ) {
    
.CGTN-BUCKET .bucket-container-left {width:100%;padding-right:0px;}

.CGTN-BUCKET .bucket-container-right {width:100%;}
    
.CGTN-BUCKET .container-60 {
    margin-bottom: 15px;      
}


.CGTN-BUCKET .container-40 { 
    margin-bottom: 15px;    
}

.CGTN-BUCKET .container-50 { 
    margin-bottom: 15px;

}    
    
    
}


/* BEGIN BUCKET CAROUSEL */

.CGTN-BUCKET .carousel {
 /* background: #FAFAFA;*/
    font-family: Helvetica, Arial, sans-serif; 
    margin-bottom: 30px;
    width:100%;
    max-height:380px;
    overflow: hidden;

    
}

.CGTN-BUCKET .carousel:after {
  content: 'flickity';
  display: none;
}


.CGTN-BUCKET .carousel-cell {
  width: 320px;
  margin-right: 10px;
    padding-bottom:10px;
    height: auto;
      margin: 0px 10px 15px 0px;
 
}

.CGTN-BUCKET .carousel-cell .feature-cover {
  width: 320px;
padding-bottom: 56.25%; /* 16:9 */
margin-bottom: 5px;    


}


.CGTN-BUCKET .carousel-cell  .feature-title {
    

    width:100%;
    padding: 0px;
    margin: 0px; 
        font-family: dinprobold, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    font-size: 1.1em;
    line-height: 1.2;
    color: #000000;
    margin-bottom: 5px;
    display: inline-block;
}


.CGTN-BUCKET .carousel-cell .feature-description {
  font-family: "montserrat-n5", "montserrat",  "Helvetica Neue", dinpromedium, sans-serif;
    font-weight:500;
    font-style: normal;
    font-size: .8em;
    line-height: 1.3;
    color: #444444;
     -webkit-transition-duration: .5s;
    transition-duration: .5s;
    display: inline-block;

  }

.CGTN-BUCKET .carousel-cell:hover .feature-title {
    
    color:#336699;
      -webkit-transition-duration: .3s;
  transition-duration: .3s;
}


.CGTN-BUCKET .carousel-cell:hover .feature-description {

    color: #0A0A0A;
          -webkit-transition-duration: .3s;
  transition-duration: .3s;

  }



.CGTN-BUCKET .feature-meta {
    font-family: dinpro-regularregular,"Helvetica Neue", Helvetica, "sans-serif";
    width: 100%;
    font-size: .8em;
    padding: 0px;
    margin: 0px 0px 5px 0px;
    border-bottom: 1px dashed #ccc;
       display: inline-block;
  
}


.CGTN-BUCKET .feature-meta .date  {

float:left;
   font-size: .8em;
    text-align: left;
    padding: 5px 2px;
    color:#666666;   
}

.CGTN-BUCKET .feature-meta .show {

float:right;
   font-size: .8em;
    text-align: right;
    text-transform: uppercase;
    padding: 5px 2px;
    color:#666666;   
}

.CGTN-BUCKET .feature-card-list .feature-meta{
 float: right;
       display: inline-block;
    width:auto;
  
}





@media all and ( max-width: 480px ) {
  /* disable Flickity for large devices */
    
    
.CGTN-BUCKET .carousel {

    height:auto;
    max-height:none;
        margin-bottom: 0px;

    
}    
    
 .CGTN-BUCKET  .carousel:after {
    content: '';
  }


.CGTN-BUCKET .carousel-cell {
  width: 100%;
  height: auto;
      margin: 0px 0px 15px;
}
    
.CGTN-BUCKET .carousel-cell .feature-cover {
  width: 100%;
padding-bottom: 56.25%; /* 16:9 */
margin-bottom: 5px;    
  

}
  
    .CGTN-BUCKET .carousel-cell .feature-title {
           font-size: 1.1em;
    }
    
.CGTN-BUCKET .carousel-cell-last {
           display: none;
    }  
    
.CGTN-BUCKET .carousel-cell .feature-description {
 
height: auto;
  
}    
    

}

/* END BUCKET CAROUSEL */



/* BEGIN FEATURE CARDS */

/* START FEATURE CARD STANDARD */
.CGTN-BUCKET .feature-card {
    
 
    padding: 0px 0px 15px 0px;
    margin-left: auto;
    margin-right: auto; 
    text-align: left;
    
}



.CGTN-BUCKET .feature-card .feature-cover {

width: 100%;
	padding-bottom: 56.25%; /* 16:9 */
	position: relative;
	background: blue;
    margin-bottom: 10px;
    
}


.CGTN-BUCKET .feature-card .feature-thumbnail {

display: block;
width:100%;    
height: auto; 
margin:0px 0px 10px;    
    
}

.CGTN-BUCKET .feature-card .feature-title {

    font-family: dinprobold, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    font-size: 1.3em;
    line-height: 1.2;
    color: #000000;
    margin: 0px 0px 5px;
          -webkit-transition-duration: .3s;
  transition-duration: .3s;
}


.CGTN-BUCKET .feature-card .feature-description {
font-size: 0.9em;
    font-family: "montserrat-n5", "montserrat",  "Helvetica Neue", dinpromedium, sans-serif;
    font-weight:500;
    font-style: normal;
    line-height: 1.3;
   color: #444444;
    margin: 0px 0px 5px;
          -webkit-transition-duration: .3s;
  transition-duration: .3s;
}


.CGTN-BUCKET .feature-card:hover .feature-title {
    
    color:#336699;
      -webkit-transition-duration: .3s;
  transition-duration: .3s;
}

.CGTN-BUCKET .feature-card:hover .feature-description {

    color: #0A0A0A;
          -webkit-transition-duration: .3s;
  transition-duration: .3s;

  }




@media all and ( max-width: 480px ) {
  /* disable Flickity for large devices */
.CGTN-BUCKET .feature-card .feature-title {

    font-size: 1.2em;

}


.CGTN-BUCKET .feature-card .feature-description {
font-size: 0.8em;
 
}
  }







/* END FEATURE CARD STANDARD */
/* START FEATURE CARD HUGE */

.CGTN-BUCKET .feature-card.card-huge {
    
    background-color: white;
    padding: 0px 0px 15px 0px;
    margin-bottom: 15px;
    margin-left: auto;
    margin-right: auto; 
    text-align: center;
    
}


.CGTN-BUCKET .feature-card.card-huge .feature-title{

    font-family: dinprobold, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    font-size: 1.6em;
    line-height: 1.2;
    color: #000000;

}


.CGTN-BUCKET .feature-card.card-huge .feature-description {
    font-size: 1em;
    font-family: "montserrat-n5", "montserrat",  "Helvetica Neue", dinpromedium, sans-serif;
    font-weight:500;
    font-style: normal;
    line-height: 1.3;
    color: #444444;
    margin: 0px 0px 0px;
}


.CGTN-BUCKET .feature-card.card-huge:hover .feature-title {
    
    color:#3399cc;
      -webkit-transition-duration: .3s;
  transition-duration: .3s;
}



@media all and ( max-width: 480px ) {
    
.CGTN-BUCKET .feature-card.card-huge {
    
    text-align: left;
    
}    
    
.CGTN-BUCKET .feature-card.card-huge .feature-title{
    font-size: 1.2em;
    }
    
   .CGTN-BUCKET .feature-card.card-huge .feature-description {
    font-size: .8em; 
    
    
    }
}

/* END FEATURE CARD HUGE */

/* END BUCKET CARDS */


/* CARD SIZING */

.feature-card.thirds 
{
float: left;
display: block;
margin-right: 1.25%;
width: 32.5%; 
}

.feature-card.thirds:nth-child(3n+4) {
    margin-right: 0px;
}

.feature-card.halves 
{
    float: left;
    display: block;
    margin-right: 2%;
    width: 49%;
}

.feature-card.halves:nth-child(2n+3) {
    margin-right: 0px;
    
}

@media all and ( max-width: 480px ) {
  /* disable Flickity for large devices */
    .feature-card.halves {
margin-right: 0px;
float:none;    
width: 100%; 
  }

}


/* FEATURE LIST */









/* END FEATURE LIST */

.CGTN-BUCKET .feature-card-list {
    
    padding: 10px 0px 10px 0px;
    border-top: 1px dashed #cccccc;
    display: table;
    vertical-align:middle;
    width: 100%;
    
}

.CGTN-BUCKET .feature-card-list:first-child {
    

    border-top: none;
padding: 0px 0px 10px 0px;
    
}


.CGTN-BUCKET .feature-card-list .feature-cover-wrap {

float: left;
    width: 35%;
    margin-right: 2%;

}

@media all and ( max-width: 480px ) {
.CGTN-BUCKET .feature-card-list .feature-cover-wrap {

float: right;
    width: 45%;
    margin-left: 2%;
}
}

.CGTN-BUCKET .feature-card-list .feature-cover {

width: 100%;
	padding-bottom: 56.25%; /* SQUARE */
	position: relative;
	background: blue;
    margin-bottom: 0px;
}

.CGTN-BUCKET .feature-card-list .feature-title {

       font-family: dinprobold, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    font-size: 1.1em;
    line-height: 1.1;
    color: #000000;
    margin: 0px 0px 5px 0px;
          -webkit-transition-duration: .3s;
  transition-duration: .3s;

}

.CGTN-BUCKET .feature-card-list .feature-description {
 
font-size: .8em;
    font-family: "montserrat-n5", "montserrat",  "Helvetica Neue", dinpromedium, sans-serif;
    font-weight:500;
    font-style: normal;
    line-height: 1.3;
    color: #444444;
    margin: 5px 0px 0px 0px;  
          -webkit-transition-duration: .3s;
  transition-duration: .3s;

}


.CGTN-BUCKET .feature-card-list:hover .feature-title {
    
    color:#336699;
      -webkit-transition-duration: .3s;
  transition-duration: .3s;
    
}

.CGTN-BUCKET .feature-card-list:hover .feature-description {

    color: #0A0A0A;
          -webkit-transition-duration: .3s;
  transition-duration: .3s;
    

  }



/* FEATURE ROWS */


.CGTN-BUCKET .feature-card-row {
    
    background-color: white;
    padding: 0px 0px 0px 0px;
    margin-bottom: 15px;
    display: table;
    
}

.CGTN-BUCKET .feature-card-row .feature-cover-wrap {

float:left;
    width:45%;
    margin-right: 15px;
}
    
.CGTN-BUCKET .feature-card-row .feature-cover {

width: 100%;
	padding-bottom: 56.25%; /* 16:9 */
	position: relative;
	background: blue;
    margin-bottom: 0px;
}



.CGTN-BUCKET .feature-card-row .feature-title {

       font-family: dinprobold, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    font-size: 1.5em;
    line-height: 1.1;
    color: #000000;
    margin: 0px 15px 10px 15px;
}


.CGTN-BUCKET .feature-card-row .feature-description {
font-size: .9em;
    font-family: "montserrat-n5", "montserrat",  "Helvetica Neue", dinpromedium, sans-serif;
    font-weight:500;
    font-style: normal;
    line-height: 1.2;
    color: #444444;
    margin: 5px 15px 5px 15px;   

}

@media all and ( max-width: 480px ) {

.CGTN-BUCKET .feature-card-row .feature-cover-wrap {

width: 33.3%;
    float: left;
    margin-right: 10px;
    margin-left: 0px;

}
    
.CGTN-BUCKET .feature-card-row .feature-cover {

padding-bottom: 66.6%; /* 4:3 */

}
           
    .CGTN-BUCKET .feature-card-row .feature-title {

font-size: 1.1em;
    margin: 0px 10px 5px 0px;
}


.CGTN-BUCKET .feature-card-row .feature-description {
font-size: .8em;
    margin: 5px 0px 10px 0px;   

}
}


.CGTN-BUCKET button.more-button
{
    clear: both;
float: right;
padding:7px;
    background:#ffffff;
    color:#336699;
        font-weight:500;
    font-family: "montserrat-n4", "montserrat",  "Helvetica Neue", dinpromedium, sans-serif;
    border:1px solid #336699;
        -webkit-transition-duration: .3s;
  transition-duration: .3s;
font-size: .9em;    

}


.CGTN-BUCKET button.more-button a
{
    color:#336699;
       }

.CGTN-BUCKET button.more-button:hover a
{
    color:#ffffff;
       }

.CGTN-BUCKET button.more-button a:visited
{
    color:#336699;
       }



.CGTN-BUCKET button.more-button:after

{content:" >>>";}   




.CGTN-BUCKET button.more-button:hover 
{
    color:#ffffff;
    background:#336699;
    -webkit-transition-duration: .3s;
  transition-duration: .3s;

}




/*END SOCIAL BUTTONS*/




/*! Flickity v2.1.2
https://flickity.metafizzy.co
---------------------------------------------- */

.flickity-enabled {
  position: relative;
}

.flickity-enabled:focus { outline: none; }

.flickity-viewport {
  overflow: hidden;
  position: relative;
  height: 100%;
}

.flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* draggable */

.flickity-enabled.is-draggable {
  -webkit-tap-highlight-color: transparent;
          tap-highlight-color: transparent;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.flickity-enabled.is-draggable .flickity-viewport {
  cursor: move;
  cursor: -webkit-grab;
  cursor: grab;
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

/* ---- flickity-button ---- */

.flickity-button {
  position: absolute;
  background: hsla(0, 0%, 100%, 0.60);
  border: none;
  color: #333;
}

.flickity-button:hover {
  background: white;
  cursor: pointer;
}

.flickity-button:focus {
  outline: none;
  box-shadow: 0 0 0 5px #19F;
}

.flickity-button:active {
  opacity: 0.9;
}

/*.flickity-button:disabled {
  opacity: 0.3;
  cursor: auto;
  pointer-events: none;
}*/

/* hide disabled button */
.flickity-button:disabled {
  display: none;
}






.flickity-button-icon {
  fill: #333;
}

/* ---- previous/next buttons ---- */

.flickity-prev-next-button {
  top: 20%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  /* vertically center */
  transform: translateY(-50%);
}

.flickity-prev-next-button.previous { left: 10px; }
.flickity-prev-next-button.next { right: 10px; }
/* right to left */
.flickity-rtl .flickity-prev-next-button.previous {
  left: auto;
  right: 10px;
}
.flickity-rtl .flickity-prev-next-button.next {
  right: auto;
  left: 10px;
}

.flickity-prev-next-button .flickity-button-icon {
  position: absolute;
  left: 20%;
  top: 20%;
  width: 60%;
  height: 60%;
}

/* ---- page dots ---- */

.flickity-page-dots {
  position: absolute;
  width: 100%;
  bottom: -25px;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
  line-height: 1;
}

.flickity-rtl .flickity-page-dots { direction: rtl; }

.flickity-page-dots .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 8px;
  background: #333;
  border-radius: 50%;
  opacity: 0.25;
  cursor: pointer;
}

.flickity-page-dots .dot.is-selected {
  opacity: 1;
}
