* { padding:0; margin:0;} 
body { font-family:kittithada_roman; font-size:16px; background-color:#fbfbfb;}
a { text-decoration:none; color: #eb1c22;}
a:hover h3 { color: #6b0000}
h2 { font-weight:normal;}
ul,li{list-style: none;}

.container { width: 1200px; margin: 0 auto; position: relative;}
.container:after {content: "";display: block;clear: both;}
.topbar { background:#6db600; height:60px;}

.head { width:100%; box-sizing:border-box; overflow: hidden }
.head *[class^="logo"]{}
.head .logo {display: inline;  float: left; padding: 8px 8px 6px }
.head .logo img { width:140px; height:auto;  float: left;}
.head span { font-size: 35px; color: #FFF; display: inline-block; padding: 0 20px;}    
.head .social-zone { display: inline; float: right; padding: 15px 8px 6px; }
.social-zone .share-fb, .social-zone .share-tw { float: left; height: auto; margin-left: 10px; }

.text-alert2 { z-index: 1; margin-top: 50px;margin-bottom: 60px; }
.text-alert { z-index: 1; top:-240px;  }
.main { width:100%; box-sizing:border-box; overflow: hidden; /*background-color: #fbfbfb;*/position: relative; }
.graphic2 {background:#fbfbfb url("../../images/bg_scotch4.jpg") center 15px no-repeat ; }
.graphic { width: 100%; background: url("../../images/bg-scotch-x3-s.jpg") center top no-repeat ; height: 724px; display: block;     position: relative; }

.graphic2.gallery {background:#fbfbfb url("../../images/bg_scotch-gall.jpg") center 50px no-repeat ; }

.gallery .winners{margin-top: 260px;}
.gallery .winners p{color: #686868;}

.gallery-1{padding: 20px 0}

.winners{margin-top: 390px;}
.winners ul{width: 100%;overflow: hidden;}
.winners ul li{    float: left;padding: 0 5px;width: 25%;box-sizing: border-box;}
.winners ul li img{width: 100%;    box-shadow: 0 2px 3px rgba(0,0,0,0.3);}
.winners p{font-size: 38px;text-align: center;padding: 15px 10px 30px;color: #002f90;}
.winners h2{font-size: 72px;color: #002f90;}

.vdo-clip{padding: 20px 0;}
.vdo-clip h2{color:#eb1c22;}
.vdo-clip iframe{display: block;margin: 10px auto 20px;box-shadow: 0 2px 3px rgba(0,0,0,0.3); }
/*.vdo-clip div {position: relative;}*/

.photo-gal{text-align: center;margin:20px auto;}
.photo-gal ul{overflow: hidden;display: inline-block;margin:0 auto;}
.photo-gal li{box-sizing: border-box;float: left;text-align: center;}
.photo-gal li img{width: 100%;transition: all .5s;transform-origin:center;}
.photo-gal li a:hover img{transition: all .5s;transform-origin:center;transform: scale(1.05);}
.photo-gal p{font-size: 28px;margin-top: -20px;}
.photo-gal h2{color:#eb1c22;text-align: left;margin-left: 10px;}
.photo-gal .loadmore{float: right;margin: 16px 10px 16px 0;}

.link-container{margin: 0 auto 50px;text-align: center;}
.link-container .loadmore{width: 150px;display: inline-block;}


.divider {box-sizing: content-box; height: 0; margin:10px; border: 0; border-top: 1px solid #E5E5E5; }
h2 { text-align: center; font-family:'kittithada_roman',Sans-Serif; font-size: 35px;}
span.text-hashtag { color: #eb1c22; } 
.rules { box-sizing: border-box; overflow: hidden; margin:20px 0; padding: 15px 20px; display: block; border-radius: 2px;}
.rules .title { font-size: 40px; display: inline; clear: both; }
.rules ol { padding:10px 20px 0; }
.rules ol li { font-size: 28px; padding: 5px 0}
span.invite { text-align: center; color: #e15851; font-size: 30px; display: block; }

.card { width: 100%; box-sizing:border-box; overflow: hidden;  padding: 15px 20px; text-align: center; }
.card-embed { width: 30%; margin: 13px; display: inline; float: left} 
.card-embed iframe, .card-embed blockquote { width:100%; border:none; overflow:hidden;}

a.loadmore, a.loading, a.disabled { display: block; width: 120px; text-align: center; padding: 6px 30px; background: #e53237 ; border-radius: 2px; box-shadow: 0 2px 1px #cd2429; color: #FFF; font-size: 24px; margin: 16px auto;}
a.loading img { vertical-align: middle; width: 20px; margin-right: 5px; }
a.disabled { background: #b5b5b5; box-shadow: 0 2px 1px #b5b5b5; }

hr { position: relative; width:80%; margin:24px auto 10px; border:0; border-bottom:1px solid #ccc; padding: 8px 0;}
hr:before { content:""; display: block; position: absolute; top:0; left: 50%; width: 30px; height:30px; border-radius: 100%; border:1px solid #ccc; background: #FFF; transform:translateX(-50%)}
.content { width: 100%; display: inline-block; margin:50px auto 0; }
.content p {width:46%; color: #666; margin: 60px 0; font-size: 26px; text-align: right; float: left;}
.content img {float: left;}

.content2 { width: 100%; display: inline-block; margin:50px auto 0; }
.content2 p {width:46%; color: #666; margin: 60px 0; font-size: 26px; text-align: right; float: left;}
.content2 img {float: left;}
.content3 h2{font-size: 48px;color: #002f90;padding:10px;background-color: #eaeaea;margin-top: 20px;}
.content3 div{margin:30px auto 0;position: relative;display: inline-block;width: 33.33%;}
.content3 div:after{content: "";width: 200px;height: 61px;border-radius: 4px;display: block;position: absolute;background: url('../../images/confirm.png') center no-repeat;background-size: 100%;bottom: -10px;right: -40px}
.content3 div img{width: 100%}



/* gallery css hack*/
#vlightbox1 .vlightbox1{width:20%;box-sizing: border-box;margin: 0;display: block;float: left;padding: 10px;}
#vlightbox1 .vlightbox1 img {width: 100%;}
#vlightbox1 .vlightbox1 div{bottom: 0;right: 0;height: auto;}



@media (max-width: 1200px)  {
	.container { width: auto; }
	.graphic2.gallery {background-size: 100%;background-position: center 60px;}
}

@media (max-width: 980px) {
	.photo-gal li{width: 50%;}
	.content2 {text-align: center;margin: 0 auto;}
	.content2 img{float: none;}
	.content2 p {width: 100%;text-align: center;}

    }
@media (max-width: 640px)  {
	#vlightbox1 .vlightbox1{width:33.33%;}
	.graphic2.gallery {background-size: 140%;background-position: center 90px;}
	
	.vdo-clip div {width: 90%;margin: 0 auto;overflow: hidden;}
	.photo-gal .loadmore{float: none;margin: 16px auto;}

	}

@media (max-width: 480px)  {



.head { width:100%; box-sizing:border-box; overflow: hidden }
.head *[class^="logo"]{}
.head .logo { display: inline;  float: left; padding: 8px 8px 6px; position: absolute; }
.head .logo img { width:115px; }
.head span { font-size: 30px; }  

.head .social-zone { display: inline; float: right; padding: 70px 8px 6px; z-index: 1; position: relative;}
.social-zone .share-fb, .social-zone .share-tw { float: left; height: auto; margin-left: 10px; }
.graphic { width: 100%; background: url("../../images/bg-scotch-mb.jpg") center top no-repeat; background-size: cover; padding-bottom: calc(458/414*100%);
     	   height: 0;}
.graphic2 ,.graphic2.gallery {background-size: 140%;background-position: center 90px;}

.text-alert2{margin-top: 10px;}
.winners{width: 100%;margin-top: 250px;}
.winners ul li{width:100%!important;padding-bottom: 20px;}

h2 { padding: 10px;}
.card-embed { width: 100%; margin: 0 auto} 
.content p { text-align: center; width:100%; margin: 20px 0;}
.content img { float: none; }
.text-alert { z-index: 0; top:0;  }
.content2{margin:10 auto;}
.content2 p{width:100%;text-align: center;margin: 10px 0;}
.content2 img {width: 100%;}
.content3 h2{font-size: 36px;}
.content3 div{width: 80%;}



}