/*	Default Layout
	92px columns, 24 px gutters, 72 px margins, 1234px total (extra space for scrollbars)
	-------------------------------------------------------------------------------
cols    1    2     3     4     5     6     7     8     9     10     11     12     13
px      68   160   252   344   436   528   620   712   804   896	988    1050   1142 */



.playbook {
   position: relative; 
    margin-top: 10px;
    margin-bottom: 20px;
}


.clip {
    position: absolute;
     left: 40%;
   z-index: 3;
        }

.clip img {
    width: 250px;
}


.clipboard {
    position: relative;
    top: 55px;
    background-image: url("../images/2025/B2S-clipboard-texture.jpg");
     background-color: #cccccc;
    border-radius: 20px;
    padding: 30px 20px 20px 20px;
    z-index: 1;
}

.paper {
    background: #fff;
}

.video-box {
    width: 75%;
    margin-right: auto;
    margin-left: auto;
}

.resource-img {
  width: auto;
  float: left;
  margin: 5px 10px 5px 5px;
  background: #FFF;
  padding: 5px;
  border: 1px solid #fff;
  margin-top: 5px;
  border: thin solid #ddd;
}



/*------- Tabs -----------*/


.content {
	width: 100%;
	z-index: 1;
	background-color: #FFF;
	margin-top: 0px;
	padding-top: 25px;
	padding-right: 12px;
	padding-bottom: 12px;
	padding-left: 12px;
	background-color: rgba(89,20,121,1);
	/*background-image: url("../images/lined-paper-background.jpg");
	filter: drop-shadow(7px 4px 9px rgba(0,0,0,0.5));*/
	/*border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: rgba(89,20,121,.5);
	border-right-color: rgba(89,20,121,.5);
	border-bottom-color: rgba(89,20,121,.5);
	border-left-color: rgba(89,20,121,.5);*/
     }
          
	.content .content{
		margin-left: 20px;
	}
	
     .content .padder{
       height: 50px;
     }
  
/*.paper {
    position: relative;
 	/* top: 0;
 	 left: 0;
  	  	-webkit-transform: rotate(-3deg);
	 	-moz-transform: rotate(-3deg);
		-ms-transform: rotate(-3deg);
		-o-transform: rotate(-3deg);
		transform: rotate(-3deg);
		 filter: drop-shadow(7px 4px 9px rgba(0,0,0,0.5));
		 background-image: url("../images/lined-paper-background.jpg");
         z-index: 1
}*/




/*		10 Column Layout: 992px. 
		Gutters: 24px.
		Outer margins: 28px.
		Inherits styles from: Default Layout.
-------------------------------------------------------------------------------
cols    1     2      3      4      5      6      7      8      9      10
px      68    160    252    344    436    528    620    712    804    896    */

@media only screen and (min-width: 992px) and (max-width: 1221px) {
    
  
    
}





/*		Tablet Layout: 768px.
		Gutters: 24px.
		Outer margins: 28px.
		Inherits styles from: Default Layout.
-----------------------------------------------------------------
cols    1     2      3      4      5      6      7      8
px      68    160    252    344    436    528    620    712    */

@media only screen and (min-width: 768px) and (max-width: 991px) {
    
  
	
.clip {
    position: relative;
     left: 35%;
   z-index: 3;
        }

.clip img {
    width: 200px;
}
    
.clipboard {
    top: -65px;
    border-radius: 20px;
    padding: 30px 20px 20px 20px;
    z-index: 1;
}
    
.resource-img {
  float: none;
  margin: 5px 50% 5px auto;
  background: #FFF;
  padding: 5px;
}
    
    
}




/*		Wide Mobile Layout: 480px.
		Gutters: 24px.
		Outer margins: 22px.
		Inherits styles from: Default Layout, Mobile Layout.
------------------------------------------------------------
cols    1     2      3      4      5
px      68    160    252    344    436   */

@media only screen and (min-width: 480px) and (max-width: 767px) {
    
    .playbook-container {
    min-height: 140vh;
}

    .clip {
    position: relative;
     left: 35%;
   z-index: 3;
        }

.clip img {
    width: 150px;
}
    
.clipboard {
    top: -50px;
    border-radius: 20px;
    padding: 30px 20px 20px 20px;
    z-index: 1;
}
    
.video-box {
    width: 100%;
}
    
.resource-img {
  float: none;
  margin: 5px 50% 5px auto;
  background: #FFF;
  padding: 5px;
}
    
}



/*		Mobile Layout: 320px.
		Gutters: 24px.
		Outer margins: 34px.
		Inherits styles from: Default Layout.
---------------------------------------------
cols    1     2      3
px      68    160    252    */

@media only screen and (max-width: 479px) {
    

    .clip {
    position: relative;
     left: 30%;
   z-index: 3;
        }

.clip img {
    width: 120px;
}
    
.clipboard {
    top: -30px;
    border-radius: 20px;
    padding: 30px 20px 20px 20px;
    z-index: 1;
}

.video-box {
    width: 100%;
}

.resource-img {
  float: none;
  margin: 5px 50% 5px auto;
  background: #FFF;
  padding: 5px;
}
    
    
}